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

Question

我有一个使用 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 store 或使用浅层渲染的情况下根据路由测试此组件的输出？

更新:如果我尝试使用 shallow()快照不呈现任何输出。

Answer 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();