score:3
enzyme shallow
specifically is meant to not be able to test children of the component being passed. because staticrouter
is the parent component, componentform
is never getting properly rendered, and so link
will never be in the view. so, using shallow
you can test that staticrouter
properly renders a componentform
, but you cannot look inside componentform
.
you have two options:
first, you could just pass componentform
to the shallow
method. you mentioned in comments that this caused things to break. that's likely because componentform
expects props from staticrouter
. you can pass these manually:
shallow(<componentform routerprop1={'foo'} routerprop2={'bar'} />);
your other option is to to a deep render using enzyme render
. simply replace shallow
with render
and that should work. do note that this is discouraged for several reasons. first, as noted with shallow
, by not doing a shallow
render, you possibly allow yourself to test things which the component you are passing in has no knowledge of. for example, staticrouter
has no knowledge about componentform
's link
, and so the test for componentform
's link
should be independent of staticrouter
. second, render
is much slower than shallow
, so if you have lots of tests and lots of components, you will notice a considerable slowdown.
Source: stackoverflow.com
Related Query
- Unit test - Link in React using Jest & Enzyme
- Trying to unit test a React component using Jest and Enzyme
- write unit test for event handlers that updates some state in react using jest and enzyme
- Can we skip a react hook (getderivedstatefromprops) while unit test of a component using Enzyme and jest
- How to write test case for ErrorBoundary in React using Jest / Enzyme
- How to unit test a react event handler that contains history.push using Jest and Enzyme?
- How to unit test useEffect cleanUp return function using Jest and Enzyme
- Unit test method that calls clearInterval with Jest and Enzyme on React
- my data test id is there but my test cannot find it react enzyme jest unit tests
- How to check the value of a nested React component in a unit test with Enzyme and Jest
- React Unit test using jest failed
- how to test OnSubmit in React using Jest and Enzyme
- Using Jest and Enzyme to test functional React components that are using Redux
- stub fetch unit test react with enzyme and jest
- Is there a way to unit test an innaccessible callback function that is called from a child React component using jest
- How can I test if child React component was rendered based on a URL change using Jest and Enzyme
- How to test a method which is in mapStateToProps in React using Jest - Enzyme
- How do I unit test amcharts using jest with react and typescript?
- How to refer to conditional elements when unit testing React components using jest and enzyme
- How to write a test case for a simple React component using Jest and Enzyme
- In React functional Component , test internal functional using jest and enzyme
- Test React Reducer using Jest Enzyme
- How to test if a prop is rendered correctly in a Component using Jest and Enzyme in React
- How to test if state of a component is changed by the function using jest and Enzyme in React TDD
- how to unit test react reduxsauce saga using jest and enzyme?
- How to cover test cases for Svg react component using Jest + Enzyme
- Jest Enzyme test a React component that returns null in render method
- How to unit test a style of a React Component using Jest.js?
- Mocha, Enzyme: Unit testing custom functions in react component using enzyme
- React Enzyme Jest test component with className
More Query from same tag
- trouble mapping reactstrap modals
- How to hide a button component on a particular route in react-router
- How to wait until context value has been set | React Hooks
- ES6 & Webpack: import not working
- Context data does not get passed into nested component: React+Typescript+ContextAPI
- How to update a child component state after an ajax call
- Change font-awesome icon onclick reactjs
- how to replace this code snippet to not use attrs? react and emotion/styled
- Database returns object but it is not displaying in JSON within my state correctly
- How to pass an array of data to one component to another component using history.push in ReactJs when fetched using Axios
- How to pass variable when dispatching fetch function in react component?
- How to update the state of a string using previous state
- How to update Jest testing framework in create-react-app?
- Creating a hook for common state in react
- How to detect page refresh on react
- ‘content-type’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response
- Can't push React component into an array
- Refactoring UNSAFE_componentWillReceiveProps
- Switch Page without content from root page React
- How to change the Livechat bubble position in browser using react-livechat module?
- Using search params with HashRouter from react-router
- Shallow render with enzyme can't find elements
- Is there a away to pass lifecycle hook as a param to a HOC in React?
- Typing a generic websocket handler
- React-JSS with material-ui and server side rendering
- How to auto-refresh time in React when using 'date-fns' library
- Prefill form data in React
- How and when to set mobx domain object properties?
- How to change state in a handler
- Cannot access JavaScript object properties parsed from JSON