Testing in react with jest and enzyme | Unit Testing in React

by himanshu on September 08, 2021

Install React

 Step 1 - npx create-react-app my-app


Jest : 

Jest is a JavaScript unit testing framework, used by Facebook to test services and React applications

Jest also provides Snapshot testing, the ability to create a rendered ‘snapshot’ of a component and compare it to a previously saved ‘snapshot’.


Enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output.

Enzyme, created by Airbnb, adds some great additional utility methods for rendering a component (or multiple components), finding elements, and interacting with elements.

It must be installed in addition to tools already bundled with CRA.

Jest and Enzyme

  • Both Jest and Enzyme are specifically designed to test React applications, Jest can be used with any other Javascript app but Enzyme only works with React.
  • Jest can be used without Enzyme to render components and test with snapshots, Enzyme simply adds additional functionality.
  • Enzyme can be used without Jest, however Enzyme must be paired with another test runner if Jest is not used.

As described, we will use:

  • Jest as the test runner, assertion library, and mocking library
  • Enzyme to provide additional testing utilities to interact with elements




 Install Jest and Enzyme :

Links -


Install jest - 

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer


Install enzyme -
 npm install --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json


now Lets write some code and test it


App.js
--------
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);

  return (
    <div className="App">
      <h1> Increment Counter App</h1>
      <div id="counter-value">{counter}</div>
      <button id="increment-btn" onClick={() => setCounter(counter + 1)}>
        Increment
      </button>
    </div>
  );
}

export default App;




App.test.js
--------------
import { render, screen } from "@testing-library/react";
import App from "./App";

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

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

describe("Counter Testing", () => {
  //runs before any test case executes
  beforeEach(() => {
    const wrapper = shallow(<App />);
  });

  //grab the element with h1 tag and fins that it containt the text "this is app"
  test("render the tile of the counter", () => {
    expect(wrapper.find("h1").text()).toContain("Increment Counter App");
  });

  //test to check the text in a button by grabing the id
  test("render a button with text of increment", () => {
    // const wrapper = shallow(<App />);
    expect(wrapper.find("#increment-btn").text()).toBe("Increment");
  });

  test("render the initial state of the application", () => {
    expect(wrapper.find("#counter-value").text()).toBe("0");
  });

  test("render click event of increment button and increment counter value", () => {
    wrapper.find("#increment-btn").simulate("click");
    expect(wrapper.find("#counter-value").text()).toBe("1");
  });
});




uuuu

0 Comments