1 of 14

Enzyme Tests

2 of 14

What is Enzyme?

  • Enzyme is:
    • JavaScript Testing utility for React that adds additional functions for testing framework.
    • Provides utilities that makes it easier to render, search, and assert components.
    • Open source tool developed by Airbnb and recommended by React.

3 of 14

Why use Enzyme?

  • Maintained by Airbnb, it is stable, easy to use, common among developers, and have a good documentation and a strong community.
  • Designed to mimic jQuery API, Enzyme makes coding tests more intuitive and easier to read.
  • It’s non-opinionated, so it works with various testing framework and libraries. In fact…….

4 of 14

…… here’s a list from Enzyme’s own docs about assertions & frameworks that works with it!

​

​

​

​

https://airbnb.io/enzyme/#running-enzyme-tests

5 of 14

But in this case, we will focus on the most popular pairing:

Jest + Enzyme

Source:https://medium.com/@ollelauribostr/improve-your-test-assertions-and-error-messages-with-jest-enzyme-44eec4c8f3da

6 of 14

What’s Jest?

  • Jest is the default, built-in test runner in Create React App, so no additional installation here.
  • Jest automatically look for test files with these conventions:
    • .js suffix in __tests__ folders.
    • .test.js suffix.
    • .spec.js suffix.
  • The command npm test runs Jest by default.

7 of 14

Yep, everything is default with Jest in Create React App!

You get a default feature! You get a default feature!

8 of 14

Enzyme Installation

npm install -D enzyme enzyme-adapter-react-16 react-test-renderer

  • Enzyme-Adapter-React-#: Adapter corresponding to the version of react should be installed. In this case, React 16.
  • React-Test-Renderer: Enables rendering of snapshots.
  • Babel-preset-env? : Allows use of latest JS. May need it for older Create React App - current one should already have it.
  • Optional: many package exist to add more, like chai or sinon.

9 of 14

Configuration

  • The adapter needs to be configured:

// Inside src/setupTests.js�import { configure } from 'enzyme';�import Adapter from 'enzyme-adapter-react-16';��configure({ adapter: new Adapter() });

​

10 of 14

Example unit test using Jest + Enzyme

// Production Code�const helloWorld = ({ name }) => <div>Hello {name}!</div>

export default helloWorld;

​

​

// Test Code�describe('sum()', () => {� it('renders without crashing', () => {

const welcome = shallow(<helloWorld name='Techtonica' />);� expect(welcome.find('div').text()).toEqual('Techtonica');

});

});

11 of 14

Rendering in Enzyme

  • Shallow: loads only root component. In unit testing, shallow is generally preferred over the other 2 rendering function because it’s the fastest.
  • Mount: loads full DOM tree, allowing children to be tested
  • Render: loads component node’s subtree and renders them to static HTML using Cheerio, a third party library for parsing HTML.

12 of 14

Common Enzyme API

  • find(selector)
  • exists([selector])
  • filter(selector)
  • prop(key) & props()
  • state([key])
  • simulate(String)

Below is some of the more common API. Enzyme has excellent documentation, which list out all available APIs: airbnb.io/enzyme/

13 of 14

Questions about Enzyme?

14 of 14

Testing Resources