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

Question

我有一个使用react-router的简单组件(我知道这是alpha版本):

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

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

然而,使用Jest/Enzyme我无法shallow()渲染 - 我必须使用Enzyme's 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()快照渲染没有输出.

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