How to test a component that use ReactRouter with match.params ...
I have an App.jsx ...
<Router history={history}>
<div>
<Route exact path="/list/:code" component={ListPage} />)}
</div>
</Router>
With ListPage component ..
@withRouter
export default class ListPage = extends Component {
componentDidMount() {
const { match } = this.props;
fetch(match.params.code);
}
render() {
return (<div>Hi</div>);
}
}
How can I create a test for that?
it('should render', () => {
const wrapper = renderer.create(
<Router history={history} location="/classroom/123/robots">
<ListPage.wrappedComponent {...minProps} />
</Router>,
);
expect(wrapper.toJSON()).toMatchSnapshot();
});
But I received a error:
TypeError: Cannot read property 'params' of undefined
Taranjeet Singh
Building Embedchain.ai
In my case, I passed
matchas propsimport * as renderer from 'react-test-renderer'; const renderWithProps = (props) => { const defaultProps = { match: { params: { code: 123 } }, }; return renderer.create(< ListPage {...defaultProps} {...minProps} />); } test('should render', () => { renderWithProps({}); expect(wrapper.toJSON()).toMatchSnapshot(); })renderWithProps write now uses
ListPageas a component. You can take that as parameter.