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

  • version with Jest + Enzime

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

Useful links

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.

Related Repositories

redux-mocha-vs-jest

redux-mocha-vs-jest

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