score:16
you can mock non defaults like this:
jest.mock('a-module', () => ({
__esmodule: true,
default: () => 'blah',
a: () => 'blah',
b: () => 'blah'
}));
https://remarkablemark.org/blog/2018/06/28/jest-mock-default-named-export/
or use __mocks__
as an alternative you could create a file under __mocks__
folder next to the original module with the same name as the module:
a_module_folder >
a-module.js
__mocks__ >
a-module.js
and that mock should just export the mocked versions:
export const a = () => 'blah';
export const b = () => 'blah';
and then just mock like this:
jest.mock('a-module');
for node_modules just put __mocks__
folder on the same level as node_modules
score:2
if you have a react component which is not default export which is actually a good practice (since default exports should be avoided):
export function mycomponentx() {
return (
<div>...</div>
);
}
you can mock it in jest easily:
jest.mock('path/to/mycomponentx', () => ({
mycomponentx: () => <>mock_my_component_x</>,
}));
score:3
testing react components is mostly done with enzyme, if you are trying to do it only with jest you have probably picked the wrong tool. i can only guess why you need to mock a component, but most surely you will be able to achieve it with enzyme.
there is enzyme shallow rendering which is specifically created for testing react. jest itself is not capable of rendering components. the definition as per airbnb docs is:
shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behaviour of child components.
simply said it is going to render the tested component 1 level deep e.g.
// file2.js
import { mycomponent } from 'file1';
import { shallow } from 'enzyme';
describe('mycomponent', () => {
it('should render shallowly my component', () => {
const wrapper = shallow(<mycomponent />);
console.log(wrapper.debug());
// output:
// <div>
// <a />
// <b />
// </div>
// note: even if component <a /> is consisting of some markup,
// it won't be rendered
});
});
essentially you don't need to mock any of its dependent components, these are already mocked with enzyme shallow()
what you can do instead is test when you pass certain props to <mycomponent />
, dependent components <a />
and <b />
are receiving expected props.
const wrapper = shallow(<mycomponent foo={1} bar={2} />);
expect(wrapper.find('a').props().foo).toequal(1);
expect(wrapper.find('b').props().bar).toequal(2);
Source: stackoverflow.com
Related Query
- Mock a non-default function using Jest and React
- Mock function not being called using jest and testing library on react app
- How to mock React stateless currying function using Jest & Enzyme
- Testing handle change function in React using Enzyme and Jest
- How to mock <AppContenxt.Consumer> in React using Jest and Enzyme
- Why is this is undefined when mocking event in React unit testing, using sinon.spy to mock function and enzyme.shallow render for React Component?
- Jest Mock API function causes react "act" warning and state does not gets updated
- How to test if state of a component is changed by the function using jest and Enzyme in React TDD
- How can I mock an imported React hook/module and test that it's being called properly on different test cases using Jest
- Mock function not called and not resolving or returning mocked value in React jest API testing
- Mock function doesn't get called when inside 'if' statement - React app testing with jest and enzyme?
- How to mock a method from a functional component in React using jest and Enzyme
- How to mock React component methods with jest and enzyme
- How to mock history.push with the new React Router Hooks using Jest
- Using Jest to mock a React component with props
- How Snapshot testing works and what does toMatchSnapshot( ) function do in Jest Snapshot testing for React components?
- 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
- mock useDispatch in jest and test the params with using that dispatch action in functional component
- Jest -- Mock a function called inside a React Component
- Testing an error thrown by a React component using testing-library and jest
- Mock React useRef or a function inside a functional component with enzyme and jest?
- Testing debounced function in React component with Jest and Enzyme
- How to test API calls in react using jest and enzyme?
- How to mock a React component lifecycle method with Jest and Enzyme?
- Jest Manual Mocks with React and Typescript: mock an ES6 class dependency
- Jest - mock fat arrow function within React component
- Mock setInterval method in react using jest test cases
- React 16: Call children's function from parent when using hooks and functional component
- Using Jest and Enzyme, how do I test a function passed in through props?
More Query from same tag
- Clearing setInterval() in ReactJS
- React with react-bootstrap-4
- 500 Error and Unexpected token < in JSON at position 0 when deployed MERN on Heroku
- How to use Real time chart in react?
- Am I using useRef correctly?
- npm compiling warning (Parsing error: Unexpected token, expected ";" )
- Condition valid and verified multiples times except once
- How to work with setInterval to trigger an event? JavaScript/React-toastify
- How to test sharing social media link preview on local environment?
- How to to filter the same data with 2 search bars - ReactJS
- React: setState on Child is updating parent's state on array property types
- Axios TypeError: Cannot set property 'host' of undefined
- How to show user location with a marker on react-google maps when page load?
- Synchronous action with redux-thunk
- POST object via Form-Data ( in Django)
- How to load image files with webpack file-loader
- Returns object / JSON value instead of full value, React, Graphql, Nextjs
- Dispatch function in React-Redux
- How to Update state using axios in React?
- Triggering a specific keyPress
- Set a default ref value on React?
- How to destroy component or stop its execution when route changes using React-Native?
- Why I can't set the value with setState using TypeScript?
- Passing data-id to bootstrap modal WITHOUT jquery
- Take an action on props change in ReactJS
- How can I loop, return and render an object in react
- SetState of an array of Objects in React
- How do I subscribe to React's global virtual events?
- onClick function call from another file
- How to pass props to dynamic route?