Jest is a JavaScript unit testing framework built by Facebook.

- myProgram.js
- __tests__
   - myProgram-test.js

Each test file looks something like this:

const MathModule = require("../myMath"); // 1

describe("my math module", () => {
  // 2
  it("adds two numbers", () => {
    // 3
    // Your testing code goes here
  });
});

• describe defines a set of tests.
• it defines a single test.

You can run the test with jest command.

$ jest

expect(value).toBe(something);

• toBe: compare 2 values using === operator.

expect(2).toBe(2); // OK

• toEqual: recursively compares two values.

expect({}).toEqual({}); // OK

• toContain: makes sure the array has the given item.

expect([1, 2, 3]).toContain(1); // OK

• toThrow: checks if the given function throws an error.

expect(() => {
  undefined();
}).toThrow(); // OK

• not: useful to inverse the expectation.

expect(2).not.toBe(4); // OK

You can see other matchers here.

JavaScript relies on callbacks in many cases and Jest supports testing asynchronous code.

describe('my async module', () => {
  it('supports promises', () => {
    return new Promise((resolve) => {
      setTimeout(resolve, 1000);
    })
  });

  it('supports async/await', async () => {
    await saveUser({...});
  });
});

If you need to add some setup/teardown logic, use beforeEach/afterEach and beforeAll/afterAll:

describe("my math module", () => {
  beforeAll(() => {
    console.log("This is executed before the test suite");
  });

  beforeEach(() => {
    console.log("This is executed before each testcase");
  });

  it("adds two numbers", () => {
    expect(() => {
      undefined();
    }).toThrow();
  });
});

jest.fn creates a mock function.

const add = jest.fn() //=> returns an empty function

const num = jest.fn(() => 3) //=> returns 3

$ ./node_modules/.bin/jest --watch

press p and put the file.

src/components/__tests__/main/index.js

• javascript - Run only ONE test with Jest - Stack Overflow

$ ./node_modules/.bin/jest

$ ./node_modules/.bin/jest --coverage

$ ./node_modules/.bin/jest --verbose

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output.

npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer

create src/setupTests.js file. If you don't create this file, you have to define the code below in each test file.

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

configure({ adapter: new Adapter() });

You also have to create .babelrc and paste the code below.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": "commonjs"
      }
    ],
    "@babel/preset-react"
  ]
}

if you want to test the <App /> component, you can extend our App.test.js file by adding the following. The shallow() will test the provided component and ignores any child components that may be present in the component tree thereafter. if we had a <Header /> and <Footer /> component within <App /> for example, they would be ignored in this test.

import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

describe('First React component test with Enzyme', () => {
   it('renders without crashing', () => {
      shallow(<App />);
    });
});

You can find a class called headerComponet from shallow copied Header like the code below.

describe("Header Component", () => {
  it("should render without errors", () => {
    const component = shallow(<Header />);
    const wrapper = component.find(".headerComponent");

    expect(wrapper.length).toBe(1);
  });
});

You can use debug() like the code below.

configure({ adapter: new Adapter() });

describe("It should render without errors", () => {
  it("should render without errors", () => {
    const component = shallow(<Header />);
    const wrapper = component.find(".headerComponent");

    console.log(component.debug());
  });
});

The output would be something like this.

<header className="headerComponent">
     <h1>
        Header!!
     </h1>
</header>

• jestbasics
• Jest
• Enzyme
• Testing in React with Jest and Enzyme: An Introduction
• React Unit Testing Using Enzyme and Jest | Toptal
• Jest + React Video turtorial