the Different Testing Tools (chai, mocha, enzyme, jest)

At work, we use many testing tools to test our React projects. Some of them can be confusing for beginners to understand what exactly they are used for. Below I clarified the different tools and what they are primarily used for.

chai

• This is an expectation / assertion library
• expect/should/assert are function given by chai

Mocha / Jasmine

• This is a test runner, used to run your tests and log your test results

describe/it/beforeEach

• Functions by mocha/jasmine and used to organized your test
• describe → Describe a function
• it → Specify what certain conditions are met. Lives inside the describe
• beforeEach → Setup tests before it starts

An example of test in plain English

describe "Strawberry"
  - it "is red"
    - expect(strawberry.color).to.be('red')
 - it "a type of fruit"
    - expect(strawberry.type).to.be('fruit')

Enzyme

• JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output.
• It simulates ReactDOM, and React Components like JQuery finding DOM.
• Can be used to shallow render React components, or check if components have certain children or if they have certain props.

import MyComponent from ‘./MyComponent’;
import Foo from ‘./Foo’;
describe(‘<MyComponent />’, () => {
  it(‘renders three <Foo /> components’, () => {
    const wrapper = shallow(<MyComponent foo=’bar’ />);
    expect(wrapper.find(Foo)).to.have.length(3);
    expect(wrapper.props().foo).to.equal(‘bar’);
  });
});

Jest

• A unit testing framework developed by Facebook for ReactJS project.
• Use Jest to capture snapshots of React components for certain time with props and states changes. Can be used together with Enzyme.
• Can mock clickable events to capture state changes in a snapshot.

Example:

import { shallow } from ‘enzyme’;
import MyComponent from ‘../’;
import React from ‘react’;
describe(‘MyComponent’, () => {
 const props = { className: ‘foo’,
                 onChange: () => {},
                 foo: 10 
                };
 it(‘renders correctly with className, onChange, foo’, () => {
   const myComponent = shallow(<MyComponent {…props} />);
  
   // When running `jest --updateSnapshot`,
   // Jest will automatically generate component trees at that time
   
   expect(myComponent).toMatchSnapshot(); 
  });
});