Jest is a popular JavaScript testing framework that is designed to work seamlessly with React. It is fast, easy to get started with, and it has a lot of features that make it well-suited for testing React components. Enzyme is a library that is used to make it easier to test React components. It provides a way to mount components in a virtual DOM and interact with them in a way that is similar to how a user would interact with a real DOM.
To set up Jest and Enzyme, you will need to install them as dependencies in your project. You can do this by running the following command:
npm install --save-dev jest enzyme
Once you have installed Jest and Enzyme, you will need to create a configuration file for Jest. This file will tell Jest how to set up and run your tests. To create the configuration file, create a new file called jest.config.js
in the root of your project and add the following code:
module.exports = {
setupTestFrameworkScriptFile: '<rootDir>/setupTests.js',
testEnvironment: 'enzyme',
testEnvironmentOptions: {
enzymeAdapter: 'react16',
},
};
This configuration file tells Jest to use the Enzyme test environment and the react16
adapter. It also specifies a setupTestFrameworkScriptFile
that will be run before your tests are run. You can use this file to set up any global variables or configure Enzyme.
To create the setupTests.js
file, create a new file in the root of your project and add the following code:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
This code sets up Enzyme with the react16
adapter that we specified in our Jest configuration.
With Jest and Enzyme set up, you are ready to start writing tests for your React components.
Exercises
To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.
Write a test that verifies that a component has the correct class name.
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
it('should have the correct class name', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.hasClass('my-component')).toBe(true);
});
});
Write a test that verifies that a component has the correct number of children.
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
it('should have the correct number of children', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.children().length).toBe(3);
});
});
Write a test to confirm that the component renders the expected text.
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('renders the expected text', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.text()).toEqual('Expected text');
});
Write a test to confirm that the component has the expected class name.
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('has the expected class name', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.hasClass('expected-class-name')).toEqual(true);
});
Write a test to ensure that when the increment
button is clicked, the counter value is incremented by 1.
import React from 'react';
import { shallow } from 'enzyme';
import Counter from './Counter';
it('increments the counter when the increment button is clicked', () => {
// Render the component
const wrapper = shallow(<Counter />);
// Find the increment button and click it
wrapper.find('button.increment').simulate('click');
// Check that the counter value has been incremented by 1
expect(wrapper.find('span.count').text()).toEqual('1');
});