score:22
Accepted answer
const wrapper = shallow(
<Details
required={true}
match={{params: {id: 1}, isExact: true, path: "", url: ""}}
/>
);
expect(wrapper.containsMatchingElement(<h2>Details for 1</h2>)).toBeTruthy();
score:0
const wrapper = mount(
<MemoryRouter initialEntries={['/1234']}>
<Route exact path="/:id/" component={Details} />
</MemoryRouter>
);
score:4
Wrap All Tests In Context
Router exists in context, so you can wrap your tests in context and supply match params to it to test how your component picks them up.
import { BrowserRouter } from 'react-router-dom';
import { shape } from 'prop-types';
import { mount } from 'enzyme';
// Instantiate router context
const router = route => ({
history: new BrowserRouter().history,
route,
});
const createContext = route => ({
context: { ...router(route) },
childContextTypes: { router: shape({}) },
});
export function mountWrap(node, route) {
return mount(node, createContext(route));
}
Example describe:
import React from 'react';
import { TableC } from '../../src/tablec';
import { mountWrap, shallowWrap } from '../testhelp/contextWrap';
import { expectedProps } from './mockdata'
describe('Table', () => {
let props;
let component;
let route = {
location: {},
match: {[MATCH OBJ HERE]}
}
const wrappedMount = () => mountWrap(<TableC {...props} />, route);
beforeEach(() => {
props = {
query: {
data: tableData,
refetch: jest.fn(),
},
};
if (component) component.unmount();
});
test('should call a DeepTable with correct props', () => {
let route = {
location: {},
match: {[UPDATE MATCH OBJ HERE BEFORE TEST]}
}
const wrapper = wrappedMount();
expect(wrapper.find('DeepTable').props()).toEqual(expectedProps);
});
});
This also allows you to optionally add other things to context, and allows the top level object in the wrapper to be your component (as opposed to wrapping with BrowserRouter or StaticRouter)
Source: stackoverflow.com
Related Query
- How do you test router match params with jest and enzyme?
- How to test React Router params with Redux and enzyme
- How to test form submit with jest and enzyme in react?
- How to test getDerivedStateFromProps with Jest and Enzyme
- How to test an onChange input event with enzyme and jest
- How to check the value of a nested React component in a unit test with Enzyme and Jest
- How to test functions in React with Jest and Enzyme
- How to test styles and media queries rendered by a React component with Jest and/or Enzyme
- Jest with React - How do you render an entire component and test it?
- How to test async handleSubmit(e) in react with jest and enzyme
- how to test component parameters in constructor with Jest and Enzyme
- How to test and/or mock ref callback nodes and test .querySelector with Jest mocking + Enzyme shallow?
- How to test a styled-component to have a property with Jest and Enzyme
- How to test React with hooks and PubSub-js with Jest Enzyme
- How do you test for the non-existence of an element using jest and react-testing-library?
- How to test a className with the Jest and React testing library
- How to mock React component methods with jest and enzyme
- How to unit test useEffect cleanUp return function using Jest and Enzyme
- How can you set path of match with MemoryRouter and Jest? (not location or history)
- mock useDispatch in jest and test the params with using that dispatch action in functional component
- How to test useRef with Jest and react-testing-library?
- How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined
- How to test snapshots with Jest and new React lazy 16.6 API
- How to test react-dropzone with Jest and react-testing-library?
- How to test conditional rendering of components using Jest and Enzyme
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How to toggle and check a Material UI Checkbox in Enzyme / Jest Test
- How to test Websocket Client with Jest and react-testing-library
- how can I test if useState hook has been called with jest and react testing library?
- How to test react-toastify with jest and react-testing-library
More Query from same tag
- How to add flex-box to React Rating?
- "Link" from "react-router-dom" inside "extra" in antd card not working
- Issue using event.preventDefault
- TypeError: addToCart is not a function
- How to pass action creator (that uses dispatch) to store.dispatch?
- Why I use params in getInitialProps they are undefined when build in Next.js
- Conditionally render elements in React JS?
- Is it necessary to call `unmountComponentAtNode` if the component's container is removed?
- React - Render HTML When Setting a State After Fetching Data
- How to pass data from state in Iframe and access the state values from other project(React.js)?
- How to Insert SVG into React Link
- How to embed google adsense in react js
- React Navbar Not Collapsing On Link Click
- Although everything is fine, React Router does not work
- React tabs - switching destroys component, need to maintain the same component
- React how to avoid css overide other components?
- Uncaught TypeError: this.props.forecast.map is not a function
- How to sort a map by a specific field in es6 / React?
- Not able to send different callback parameter from multiple child components (same component) to parent
- Do we still need functional setState way in react hooks?
- How to render dashboard components on same page
- mobex, @inject only specific part of store
- Map function returns an empty array
- Element type is invalid on routes react-router-redux
- highchart highstock not display full yAxis data
- How do I conditionally render an object to display one section of code if the object is not empty and one section of code if the object has key: value
- Creating a component in react and typescript
- Styles are not getting overriten in the styled component in react
- Conditional Rendering in React won't work, state not working properly?
- How to conditional render css inline