使用react-router v4，Jest和Enzyme测试组件-Java 学习之路

我有一个使用react-router的简单组件（我知道这是alpha版本）：

{props.app && props.app.health &&
   <Match exactly pattern="/" component={HomeLogin} />
}

文档建议在 <MemoryRouter /> 中包装，以便在测试时为组件提供上下文 .

然而，使用Jest / Enzyme我无法 shallow() 渲染 - 我必须使用Enzyme的 mount() 或 render() ，这会导致问题，因为 HomeLogin 是一个连接组件 - 我希望能够测试我的组件渲染正确的东西，但是不测试在其中呈现的组件 .

我的测试：

it('Renders based upon matched route', () => {
  let props = {
    app: { health: true },
  };
  const component = render(
    <Provider store={store}>
      <MemoryRouter location="/">
        <Jumbotron {...props} />
      </MemoryRouter>
    </Provider>
  );
  expect(toJson(component)).toMatchSnapshot();
});

如何根据路径测试此组件的输出，而无需提供redux存储或使用浅渲染？

更新：如果我尝试使用 shallow() ，快照将无法输出 .

1 回答

您可以使用 .find(Jumbotron) 并将其用作快照匹配，例如：

const wrapped = component.find(Jumbotron);
expect(toJson(wrapped)).toMatchSnapshot();

我有一个更复杂的例子涉及 withRouter() 我正在恢复从匹配为快照之前从输出中删除所有键 . 好吧，直到测试React-Router v4在Jest和快照测试中变得更加稳固 . 例：

export function removeKeys(object) {
    if (object === undefined || object === null) {
        return object;
    }
    Object.keys(object).forEach((key) => {
        if (typeof object[key] === 'object') {
            removeKeys(object[key]);
        } else if (key === 'key') {
           delete object[key];
        }
    });
    return object;
}

...

expect(removeKeys(toJson(component))).toMatchSnapshot();

回复于 2024-04-29T09:53:53+08:00

使用react-router v4，Jest和Enzyme测试组件

1 回答

相关问题