ReactRouterDOM に依存した Component を enzyme でテストする

2020-06-06 Sat.

ReactRouterDOM の <Route /> に依存する、例えば <Link /> 等を内部に持つ Component の場合、テストする際に ReactRouter の <MemoryRouter /> を使用することで、擬似的に <Route /> 以下に存在するものとして動作させることができます。

1const wrapper = mount(
2  <MemoryRouter>
3    <Component {...props} />
4  </MemoryRouter>
5);
6
7expect(wrapper.find(".nav")).toHaveLength(1);

MemoryRouter には initialEntries 等の props により Router の状態を渡すことができます。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md

また、 wrapper.setProps() で props を更新する方法がありますが、 MemoryRouter を用いた方法だと本来 props を操作したい Component ではなく、 MemoryRouter の props が操作されてしまいます。これは、 wrapper.props() から children を取得し、 cloneElement で props を更新します。

1wrapper.setProps({
2  children: React.cloneElement(wrapper.props().children, { login: true }),
3});

enzymejs/enzyme#1384