Testing React Hooks with Enzyme and React Testing Library

css-tricks.com css-tricks.com3 years ago in #Dev Love377

As you begin to make use of React hooks in your applications, you’ll want to be certain the code you write is nothing short of solid. There’s nothing like shipping buggy code. One way to be certain your code is bug-free is to write tests. And testing React hooks is not much different from how React applications are tested in general. In this tutorial, we will look at how to do that by making use of a to-do application built with hooks. We’ll cover writing of tests using Ezyme and React Testing Library, both of which are able to do just that. If you’re new to Enzyme, we actually posted about it a little while back showing how it can be used with Jest in React applications. It’s not a bad idea to check that as we dig into testing React hooks. Here’s what we want to test A pretty standard to-do component looks something like this: import React, { useState, useRef } from “react”; const Todo = () => { const [todos, setTodos] = useState([ { id: 1, item: “Fix bugs” }, { id: 2, item: “Take out the trash” } ]); const todoRef = useRef(); const removeTodo = id => { setTodos(todos.filter(todo => todo.id !== id)); }; const addTodo = data => { let id = todos.length + 1; setTodos([ …todos, { id, item: data } ]); }; const handleNewTodo = e => { e.preventDefault(); const item = todoRef.current; addTodo(item.value); item.value = “”; }; return ( <div className=”container”> <div className=”row”> <div className=”col-md-6″> <h2>Add Todo</h2> </div> </div> <form> <div className=”row”> <div className=”col-md-6″> <input type=”text” autoFocus ref={todoRef} placeholder=”Enter a task” className=”form-control” data-testid=”input” /> </div> </div> <div className=”row”> <div className=”col-md-6″> <button type=”submit” onClick={handleNewTodo} className=”btn btn-primary” > Add Task </button> </div> </div> </form> <div className=”row todo-list”> <div className=”col-md-6″> <h3>Lists</h3> {!todos.length ? ( <div className=”no-task”>No task!</div> ) : ( <ul data-testid=”todos”> {todos.map(todo => { return ( <li key={todo.id}> <div> <span>{todo.item}</span> <button className=”btn btn-danger” data-testid=”delete-button” onClick={() => removeTodo(todo.id)} > X </button> </div> </li> ); })} </ul> )} </div> </div> </div> ); }; export default Todo; Testing with Enzyme We need to install the packages before we can start testing. Time to fire up the terminal! npm install –save-dev enzyme enzyme-adapter-16 Inside the src directory, create a file called setupTests.js. This is what we’ll use to configure Enzyme’s adapter. import Enzyme from “enzyme”; import Adapter from “enzyme-adapter-react-16”; Enzyme.configure({ adapter: new Adapter() }); Now we can start writing our tests! We want to test four things: That the component rendersThat the initial to-dos get displayed when it rendersThat we can create a new to-do and get back three othersThat we can delete one of the initial to-dos and have only one to-do left In your src directory, create a folder called __tests__ and create the file where you’ll write your Todo component’s tests in it. Let’s call that file Todo.test.js. With that done, we can import the packages we need and create a describe block where we’ll fill in our tests. import React from “react”; import { shallow, mount } from “enzyme”; import Todo from “../Todo”; describe(“Todo”, () => { // Tests will go here using `it` blocks });Test 1: The component renders For this, we’ll make use of shallow render. Shallow rendering allows us to check if the render method of the component gets called — that’s what we want to confirm here because that’s the proof we need that the component renders. it(“renders”, () => { shallow(<Todo />); });Test 2: Initial to-dos get displayed Here is where we’ll make use of the mount method, which allows us to go deeper than what shallow…

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply