blog.euxn.me
2020/6/6 (土)
ReactRouterDOM の <Route /> に依存する、例えば <Link /> 等を内部に持つ Component の場合、テストする際に ReactRouter の <MemoryRouter /> を使用することで、擬似的に <Route /> 以下に存在するものとして動作させることができます。
const wrapper = mount(
<MemoryRouter>
<Component {...props} />
</MemoryRouter>
)
expect(wrapper.find('.nav')).toHaveLength(1)
MemoryRouter には initialEntries 等の props により Router の状態を渡すことができます。
また、 wrapper.setProps()
で props を更新する方法がありますが、 MemoryRouter を用いた方法だと本来 props を操作したい Component ではなく、 MemoryRouter の props が操作されてしまいます。
これは、 wrapper.props()
から children を取得し、 cloneElement で props を更新します。
wrapper.setProps({
children: React.cloneElement(wrapper.props().children, { login: true })
});