To get started with testing using Jest and Enzyme in a React project, follow these steps
Setting Up Jest and Enzyme
Step 1: Install Dependencies
First, ensure you have Jest, Enzyme, and the necessary adapters installed. If you’re using React 16, the command would be:
npm install --save-dev jest enzyme
enzyme-adapter-react-16
For React 17, replace enzyme-adapter-react-16 with enzyme-adapter-react-17
Step 2: Configure Enzyme Adapter
Create a file named setupTests.js in the root of your project (or in the src directory, depending on your project setup). Add the following configuration
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
For React 17, use:
import { configure } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
configure({ adapter: new Adapter() });
Ensure that Jest is aware of this setup file. In your package.json, add the following under the Jest configuration
"jest": {
"setupFilesAfterEnv": ["<rootDir>/setupTests.js"]
}
Writing Tests
Example Component
Let’s say you have a simple Button component:
// Button.js
import React from 'react';
const Button = ({ onClick, children }) => (
<button onClick={onClick}>
{children}
</button>
);
export default Button;
Writing a Test for the Component
Create a test file for the Button component, typically named Button.test.js:
// Button.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';
describe('Button Component', () => {
it('should render correctly with given props', () => {
const wrapper = shallow(<Button>Click Me</Button>);
expect(wrapper.text()).toEqual('Click Me');
});
it('should call onClick when button is clicked', () =>
{
const onClickMock = jest.fn();
const wrapper = shallow(<Button onClick=
{onClickMock}>Click Me</Button>);
wrapper.find('button').simulate('click');
expect(onClickMock).toHaveBeenCalledTimes(1);
});
});
Running Tests
Run your tests using the following command:
npm test
Example Project Structure
Your project structure should look something like this
my-app/
├── src/
│ ├── components/
│ │ ├── Button.js
│ │ ├── Button.test.js
│ ├── setupTests.js
├── package.json
├── node_modules/
├── ...
