Testing React Hooks With Enzyme and React Testing Library

Building robust React applications with hooks requires rigorous testing. This tutorial demonstrates how to effectively test React hooks using Enzyme and React Testing Library, leveraging a to-do application example. We'll cover key testing scenarios and best practices to ensure bug-free code.

This guide assumes familiarity with Jest and React testing fundamentals. If you're new to Enzyme, consider reviewing its integration with Jest in React applications before proceeding.

Testing Scenarios

Our to-do component will be tested against these scenarios:

1. Component Rendering: Verify the component successfully renders.
2. Initial To-Do Display: Confirm the initial to-do items are displayed correctly.
3. Adding a New To-Do: Test the functionality of adding a new to-do item.
4. Deleting a To-Do: Verify the ability to remove a to-do item.

Here's the to-do component code:

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"> {/* Corrected classname to className */}
      <div classname="row"> {/* Corrected classname to className */}
        <div classname="col-md-6"> {/* Corrected classname to className */}
          <h2 id="Add-Todo">Add Todo</h2>
        </div>
      </div>

      <div classname="row"> {/* Corrected classname to className */}
        <div classname="col-md-6"> {/* Corrected classname to className */}
          <form onsubmit="{handleNewTodo}"> {/* Added form tag */}
            <input type="text" ref="{todoRef}" data-testid="input"> {/* Added data-testid */}
            <button type="submit" data-testid="add-button">Add Task</button> {/* Added data-testid */}
          </form>
        </div>
      </div>

      <div classname="row todo-list"> {/* Corrected classname to className */}
        <div classname="col-md-6"> {/* Corrected classname to className */}
          <h3 id="Lists">Lists</h3>
          {!todos.length ? (
            <div classname="no-task">No task!</div>
          ) : (
            <ul data-testid="todos"> {/* Added data-testid */}
              {todos.map(todo => {
                return (
                  <li key="{todo.id}"> {/* Corrected key value */}
                    <div>
                      {todo.item}
                      <button data-testid="delete-button" onclick="{()"> removeTodo(todo.id)}>X</button> {/* Added data-testid and onClick */}
                    </div>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

export default Todo;

Note: classname attributes have been corrected to className in the above code. Also, data-testid attributes have been added for easier testing with React Testing Library.

Testing with Enzyme

1. Installation: npm install --save-dev enzyme enzyme-adapter-react-16
2. Enzyme Configuration (setupTests.js):

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });

3. Tests (Todo.test.js):

import React from "react";
import { shallow, mount } from "enzyme";
import Todo from "../Todo";

describe("Todo", () => {
  it("renders", () => {
    shallow(<todo></todo>);
  });

  it("displays initial to-dos", () => {
    const wrapper = mount(<todo></todo>);
    expect(wrapper.find("li")).toHaveLength(2);
  });

  it("adds a new item", () => {
    const wrapper = mount(<todo></todo>);
    wrapper.find("input").instance().value = "Fix failing test";
    wrapper.find('[type="submit"]').simulate("submit"); // Simulate submit, not click
    expect(wrapper.find("li")).toHaveLength(3);
    expect(wrapper.find("li").last().text()).toContain("Fix failing test"); // Improved assertion
  });

  it("removes an item", () => {
    const wrapper = mount(<todo></todo>);
    wrapper.find('[data-testid="delete-button"]').first().simulate("click");
    expect(wrapper.find("li")).toHaveLength(1);
  });
});

Testing with React Testing Library

1. Installation: npm install --save-dev @testing-library/jest-dom @testing-library/react
2. Tests (Todo.test.js):

import React from "react";
import { render, fireEvent, screen } from "@testing-library/react";
import Todo from "../Todo";
import "@testing-library/jest-dom";

describe("Todo", () => {
  it("displays initial to-dos", () => {
    render(<todo></todo>);
    expect(screen.getByTestId("todos").children.length).toBe(2);
  });

  it("adds a new to-do", () => {
    render(<todo></todo>);
    fireEvent.change(screen.getByTestId("input"), { target: { value: "New Task" } });
    fireEvent.click(screen.getByTestId("add-button"));
    expect(screen.getByTestId("todos").children.length).toBe(3);
  });

  it("deletes a to-do", () => {
    render(<todo></todo>);
    fireEvent.click(screen.getAllByTestId("delete-button")[0]);
    expect(screen.getByTestId("todos").children.length).toBe(1);
  });
});

Remember to adjust file paths as needed for your project structure. This improved version provides more robust and maintainable tests. The use of data-testid makes the tests more resilient to changes in the component's structure.

The above is the detailed content of Testing React Hooks With Enzyme and React Testing Library. For more information, please follow other related articles on the PHP Chinese website!