carlosvini / redux-mocha-vs-jest

Differences between (Jest + Enzime) vs (Mocha + chaiJquery) on a React Redux sample app

Jest + Enzime vs Mocha + chaiJquery

• version with Mocha + chaiJquery

  • /test
  • all the power of jQuery selectors
  • default on Udemy's Redux Simple Starter

• version with Jest + Enzime

  • /src/__tests__
  • created by Facebook (Jest) and Airbnb (Enzime)
  • default on Create React App

Useful links

• Jest - DOM Testing
• Jest - Expect
• Enzime - ReactWrapper
• Create React App - Running Tests

Sample code

Mocha + chaiJquery - /test/components/welcome_page_test.js

    beforeEach(() => {
        component = renderComponent(WelcomePage);
    });

    it('renders text ', () => {
        expect(component).to.contain('Example list of languages');
    });
    
    it('when submitted, clears the input', () => {
        component.simulate('submit');
        expect(component.find('input:text')).to.have.value('');
    });

Jest + Enzime - /src/__tests__/components/WelcomePage.test.js

    beforeEach(() => {
        component = mountWithRedux(<WelcomePage />);
    });

    it('renders text ', () => {
        expect(component.text()).toContain('Example list of languages');
    });
    
    it('when submitted, clears the input', () => {
        component.simulate('submit');
        // Enzime does not have pseudo-class CSS selector yet
        // So we cant use input:text
        expect(component.find('input').prop('value')).toBe('');
    });

Created with Create React App

This project was bootstrapped with Create React App.

Below you will find some information on how to perform common tasks.
You can find the most recent version of this guide here.