Testing is one of the most important aspects to React development. Without tests, you can’t have confidence that your code will work as it’s supposed to do. For testing purposes, it can be relevant to mock a React component. This article will show you how to mock your React components in different scenarios using Jest. Using this information, you’ll know how to mock default exported components, named exported components, components that come from ES6 modules and include the props with them.
Default Export
To mock a React component, the most straightforward approach is to use the jest.mock function. You mock the file that exports the component and replace it with a custom implementation. Since a component is basically a function, the mock should also return a function. The implementation would look as follows.
jest.mock("./AwesomeComponent", () => () => { const MockName = "default-awesome-component-mock"; return <MockName />;});// TestsThis assumes that the component you’re mocking is the default export of the file. On top of that, it creates a custom name for the component in the test environment. This will simplify the resulting DOM structure, which can be useful e.g. snapshot tests.
Named Export
As mentioned, the previous implementation was for a component that is the default export of a file. But how do you mock a React component that is the named export of a file? For that, the implementation should mock the entire export of the file, instead of only the default export. That would look as follows.
jest.mock("./AwesomeComponent", () => ({ AwesomeComponent: () => { const MockName = "named-awesome-component-mock"; return <MockName />; },}));Instead of returning a function, the mock returns an object that replaces the export of the file. Inside the object, we state the property that needs to be replaced. Then, we can specify the replacement code for it, which is the same as the previous function that we used.
If you’re dealing with ES6 modules, you’ll need some additional configurations to make it work. Specifically, you’ll need the add the __esModule property to the exported object and set it to true. This signals that you’re dealing with ES6 modules and makes everything work properly. The implementation would look as follows.
jest.mock("./AwesomeComponent", () => ({__esModule: true, AwesomeComponent: () => { const MockName = "named-awesome-component-mock"; return <MockName />; },}));Including Props
We now know how to create a mock for a component that is either the default or named export of a file. But the problem is that the current mock overwrites everything from the component, including the DOM structure and props. In certain scenarios, we want to mock everything related to a component but still keep the props for testing purposes.
jest.mock("./AwesomeComponent", () => ({ AwesomeComponent: (props) => { const MockName = "named-awesome-component-mock"; return <MockName {...props} />; },}));Luckily, adding the props back to our mock implementation doesn’t require a lot of effort. Similarly to how props are defined for a usual React component, we need to capture the function parameters and pass them to the rendered elements. Doing so will include the passed props to the mocked component and allow us to use them in our tests.
Final Thoughts
For testing purposes, it can be relevant to mock a certain React component. This article showed you how to mock your React components in different scenarios. This covers default exported components, named exported components, components that come from ES6 modules, and including the props with them.
