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": ["/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 }) => (
);
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();
expect(wrapper.text()).toEqual('Click Me');
});
it('should call onClick when button is clicked', () =>
{
const onClickMock = jest.fn();
const wrapper = shallow();
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/
├── ...