Setting Up Jest and Enzyme

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.

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);
  });
});

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);
  });
});

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');
});

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);
});

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');
});