We’ll learn to implement unit testing in our React JS project and use Enzyme to test our React components in this shot.
First, let’s create a new React JS project from the terminal:
npx create-react-app testapp
cd testapp
Now install the required enzyme packages from the terminal as dev dependencies:
npm install save-dev enzyme enzyme-adapter-react-16
We’ll write our test cases in files with the extensions test.js. In this tutorial, we’ll use App.test.js.
To write unit tests, we need to understand why we need to do it. For example, we have created a button in App.js, and we want to test it. We can test it manually by clicking on that particular button. But what if we have a bunch of buttons and want to test it every time if something has broken or not.
This is why we need to use unit testing to achieve this task. With the help of an Enzyme, we can create a test case, and inside that particular test case, we can ‘simulate’ a condition of clicking the button.
Let’s make some changes in App.js by adding a button and some text in a div to it:
function App(props) {return (<div><div className="container">This is a Container</div><div><button onClick={() => props.mockFn()}>Submit</button></div></div>);}export default App;
Now let’s write unit cases in jest and enzyme to test if our components are functioning properly or not.
In App.test.js, find if we have a div containing the words This is a Container.
We use Enzyme’s Shallow method. Shallow is best used for unit testing a React component and is extensively used in unit testing. Shallow does not interfere with child components of the particular React component we are dealing with.
Create a describe() method and inside that method write our test cases with the test() or it(). We can write multiple test cases inside a describe() method.
import App from "./App";import { shallow } from "enzyme";describe("Our First Enzyme Test Case", () => {it("Test to check container is there", () => {const wrapper = shallow(<App />);const getContainer = wrapper.find(".container").text();expect(getContainer).toBe("This is a Container");});});
We consume the App component in the wrapper variable. Then use the find() method to check if there is any div’s classNames called container and if it is present, convert it to a text.
After that, use a method called expect() to check whether the variable getContainer contains the value "This is a Container".
If the condition is true we get successful test cases. So to test whether our test cases are successful, go to the terminal and run:
npm run test
In the terminal, all tests are successful, or if there are any mistakes, we would see tests would fail.
So this is how we can create a test case and run it. Now comes the next part, where we’ll test the functionality of a button inside a component:
it("Test to check button is working", () => {const mockFn = jest.fn();const wrapper = shallow(<App mockFn={mockFn} />);wrapper.find("button").simulate("click");expect(mockFn).toHaveBeenCalled();});
We create a mock function and pass it to our component. We then simulate a click and check whether that particular function is called or not.
All tests are passed if we rerun the npm run test in the terminal.
This is how we can create unit tests with Enzyme for testing whether a text is in the component or whether the functionality of a component works properly.