{"id":26576,"date":"2022-12-09T12:39:32","date_gmt":"2022-12-09T20:39:32","guid":{"rendered":"https:\/\/coderpad.io\/?p=26576"},"modified":"2023-06-05T13:47:48","modified_gmt":"2023-06-05T20:47:48","slug":"how-to-write-integration-tests-with-jest-and-react-testing-library","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/how-to-write-integration-tests-with-jest-and-react-testing-library\/","title":{"rendered":"How To Write Integration Tests With Jest And React Testing Library"},"content":{"rendered":"\n

When you build applications or websites as a developer, your primary goal is to ensure it works. To ensure it works, you test your application by checking if it works as expected, but we often perform this testing manually, which is referred to as manual testing. <\/p>\n\n\n\n

In this article, you will learn what testing means, the various types of testing, why you need to test, how testing works in React, what integration testing means, and how to write an integration test with the React testing library.<\/p>\n\n\n\n

What is testing?<\/h2>\n\n\n\n

Testing is the act or process of interacting with an application to ensure all its functionalities and features work as intended. There are generally two types of tests: manual and automated.<\/p>\n\n\n\n

Manual testing<\/strong> involves an individual or group of people (mostly handled by the quality assurance team) who interact with your application to ensure every functionality works as intended. This type of testing gets cumbersome when working with large applications. For example, when a new feature is released, you would not only test that feature but will have to test the entire application and repeat this for every little change. <\/p>\n\n\n\n

This becomes time-consuming, and you can be at the risk of human error when testing is done under pressure because no human is above mistakes. To avoid these drawbacks, we make use of automated testing.<\/p>\n\n\n\n

Automated testing<\/strong> is the act of writing programs or code to automate the process of testing your application. This will also require writing extra testing code when you create a new feature, but you’ll not need to re-write the entire test for your application. And this will also be accurate based on your code, eliminating human error, and it becomes easy to identify and fix features that break tests. Overall it gives you confidence when shipping your application. <\/p>\n\n\n\n

Types of Automated Tests<\/h3>\n\n\n\n

To ensure your application is thoroughly tested, three different types of automated tests exist. These tests are as follows:<\/p>\n\n\n\n

1. Unit tests<\/p>\n\n\n\n

2. Integration tests<\/p>\n\n\n\n

3. E2E (end-to-end) tests<\/p>\n\n\n\n

Unit tests<\/strong> involve testing an individual block\/unit of your application in isolation from other units. This unit can be a component, function, or class. Integration test<\/strong> involves testing a combination of units to ensure they work together. Finally, the E2E test<\/strong> involves testing your entire application flow to ensure everything works as designed from start to finish.<\/p>\n\n\n\n

This guide will focus on integration tests. The question that will come to your mind is why?<\/p>\n\n\n\n

Why Write Integration Tests?<\/h2>\n\n\n\n

One importance of writing tests is that you become confident when shipping your application. Still, it’s also essential to write the right test and write only a few tests because, at a point, it would become difficult to maintain.<\/p>\n\n\n\n

Unit tests are fast to write and run, but they involve testing independent units of your application, not how they work together. E2E test, on the other hand, is used to test your entire application ensuring proper communication with other systems, interfaces, and databases. Still, writing and running the E2E test takes a lot of time and can be expensive in terms of efficiency, time, and money.<\/p>\n\n\n\n

This leaves us with the last option, which is the integration test. The integration test strikes a balance between the unit and E2E tests. This is one of the best, most moderate, cheap, and most efficient tests you can write for your application. It lets you test how your application’s components work together.<\/p>\n\n\n\n

\n

\u2139\ufe0f This doesn’t mean that both unit and E2E tests are useless or you shouldn’t write them. It just means that writing more integration tests is better and more intelligent because it provides you with confidence.<\/em><\/p>\n<\/blockquote>\n\n\n\n

How testing works in React<\/h2>\n\n\n\n

Two major libraries, make it possible to write tests and test your React application. These libraries are Jest<\/a> and the React testing library (RTL)<\/a>. The React testing library was created by Kent C. Dodds<\/a> and built on the DOM Testing Library<\/a> by adding APIs for working with React components. At the same time, Jest is a JavaScript testing framework, but in React, it serves as a test runner that finds the test, runs the test, determines if a test pass or fails, and returns it in a human-readable format.<\/p>\n\n\n\n

When you create a React application with create-react-app<\/a>, by default, these dependencies are installed and ready to be used. Although you may overlook the Jest dependency in your package.json file because it is a dependency to react-script dependency, so when you inspect the react-script directory in your node_modules<\/code> folder, you will notice it.<\/p>\n\n\n\n

How to run tests in React<\/h3>\n\n\n\n

When you scaffold your React application with create-react-app<\/a>, you will notice a sample test file (App.test.tsx<\/code>) created for the App.tsx<\/code> file in your project’s src<\/code> directory.<\/p>\n\n\n\n

You may not understand what the code in the App.test.tsx<\/code> file is all about but let’s first learn how to run the test. You can run tests in React with the test command in your terminal. By default, the command has been created as part of your default script when you check package.json<\/p>\n\n\n

\"scripts\"<\/span>: {\n    \"start\"<\/span>: \"react-scripts start\"<\/span>,\n    \"build\"<\/span>: \"react-scripts build\"<\/span>,\n    \"test\"<\/span>: \"react-scripts test\"<\/span>,\n    \"eject\"<\/span>: \"react-scripts eject\"<\/span>\n},<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
You can run the following command in your terminal, which will run the test file.<\/p>\n\n\n
$ npm run test<\/code><\/span><\/pre>\n\n\n
When you run the command, some options will appear, “type ‘a’ to run all tests”, and then you will get the following output which shows that you have one test with the name “renders learn react link”, and the test is successful. <\/p>\n\n\n
PASS src\/App.test.tsx\n\u2713 renders learn react link (10 ms)\n\nTest Suites: 1 passed, 1 total\nTests: 1 passed, 1 total\nSnapshots: 0 total\nTime: 0.167 s, estimated 1 s\nRan all test suites.<\/code><\/span><\/pre>\n\n\n
Suppose there is an error; it will show that the test failed and explain what caused the failure\u2014making it possible for you to fix it quickly.<\/p>\n\n\n\n
Structure of tests<\/h3>\n\n\n\n
When you open the App.test.tsx<\/code> file, you will notice some codes for testing the App.tsx<\/code> component, which may not make sense to you yet but will soon make sense. It is important to understand that when naming a test file, you should always add .test<\/code> after the component name and before the file extension. This makes it possible for Jest to notice it as a test file and run it when you run the test command.<\/p>\n\n\n\n
When creating a test, you will make use of the test method, which accepts two major parameters: the name of the test (test identifier) and a callback function that will hold the various test instructions:<\/p>\n\n\n
test('test identifier'<\/span>, () => {\n    \/\/ test instructions<\/span>\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Building demo project<\/h2>\n\n\n\n
For this article, you\u2019ll build a todo application comprising three components: App<\/code>, Todos<\/code>, and AddTodo<\/code>, allowing you to add, delete and toggle todos in the CoderPad React sandbox<\/a>.<\/p>\n\n\n\n
\"\"\/
Image showing the various components of the todo project<\/figcaption><\/figure>\n\n\n\n
The App.tsx<\/code> file is the parent component that will be tested. It houses the AddTodo.tsx<\/code> and Todos.tsx<\/code> components:<\/p>\n\n\n
import<\/span> { useState } from<\/span> 'react'<\/span>;\nimport<\/span> AddTodo from<\/span> '.\/components\/AddTodo'<\/span>;\nimport<\/span> Todos from<\/span> '.\/components\/Todos'<\/span>;\n\nconst<\/span> App = ()<\/span> =><\/span> {\n    const<\/span> [todos, setTodos] = useState([\n    { id<\/span>: 2<\/span>, text<\/span>: 'Visit the mall to get laptop charger'<\/span>, completed<\/span>: false<\/span> },\n    {\n        id<\/span>: 1<\/span>,\n        text<\/span>: 'Get a new shoe at the store for tomorrows event'<\/span>,\n        completed<\/span>: true<\/span>,\n    },\n    ]);\n\n    const<\/span> addTodo = (newTodo<\/span>) =><\/span> {\n    setTodos([newTodo, ...todos]);\n    };\n\n    const<\/span> toggleTodo = (id<\/span>) =><\/span> {\n    setTodos(\n        todos.map((todo<\/span>) =><\/span> {\n        if<\/span> (todo.id === id) {\n            return<\/span> {\n            ...todo,\n            completed<\/span>: !todo.completed,\n            };\n        }\n        return<\/span> todo;\n        })\n    );\n    };\n\n    const<\/span> deleteTodo = (id<\/span>) =><\/span> {\n    setTodos(todos.filter((todo<\/span>) =><\/span> todo.id !== id));\n    };\n\n    return<\/span> (\n    <div<\/span> className<\/span>=\"container\"<\/span>><\/span>\n        <h1<\/span> className<\/span>=\"center\"<\/span>><\/span>Todo's<\/h1<\/span>><\/span>\n        <AddTodo<\/span> todos<\/span>={todos}<\/span> addTodo<\/span>={addTodo}<\/span> \/><\/span>\n        <Todos<\/span> todos<\/span>={todos}<\/span> toggleTodo<\/span>={toggleTodo}<\/span> deleteTodo<\/span>={deleteTodo}<\/span> \/><\/span>\n    <\/div<\/span>><\/span><\/span>\n    );\n};\n\nexport<\/span> default<\/span> App;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code above, I added all the functionalities responsible for adding, removing, and toggling todos in this component. Also, the todos<\/code> state stores all the todos with two default todos added. <\/p>\n\n\n\n
The AddTodo.tsx<\/code> component contains the form alone, and the addTodo<\/code> method is passed in as a prop<\/code> from the App<\/code> component:<\/p>\n\n\n
import<\/span> { useState } from<\/span> \"react\"<\/span>\n\nconst<\/span> AddTodo = ({ todos, addTodo }<\/span>) =><\/span> {\n    const<\/span> [todo, setTodo] = useState(''<\/span>)\n    let<\/span> newTodo = {\n        id<\/span>: todos.length + 1<\/span>,\n        text<\/span>: todo,\n        completed<\/span>: false<\/span>\n    }\n\n    const<\/span> handleSubmit = (e<\/span>) =><\/span> {\n        e.preventDefault()\n        addTodo(newTodo)\n        setTodo(''<\/span>)\n    }\n\n    return<\/span> (\n        <div<\/span> className<\/span>=\"add-todo__container\"<\/span>><\/span>\n            <input<\/span> type<\/span>=\"text\"<\/span> className<\/span>=\"add-todo__input\"<\/span> value<\/span>={todo}<\/span> onChange<\/span>={(e)<\/span> =><\/span> setTodo(e.target.value)} \/>\n            <button<\/span> className<\/span>=\"add-todo__button\"<\/span> onClick<\/span>={handleSubmit}<\/span>><\/span>Add Todo<\/button<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n    )\n}\n\nexport<\/span> default<\/span> AddTodo;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The second component is the Todos.tsx<\/code> component which receives the array of all todos<\/code> as a prop alongside methods to delete and toggle a todo:<\/p>\n\n\n
import<\/span> Todo from<\/span> \".\/Todo\"<\/span>\n\nconst<\/span> Todos = ({ todos, toggleTodo, deleteTodo }<\/span>) =><\/span> {\n    return<\/span> (\n        <div<\/span> className<\/span>=\"all-todos__container\"<\/span>><\/span>\n            <h2<\/span>><\/span>{todos.length} {todos.length > 1 ? 'Todos' : 'Todo'}<\/h2<\/span>><\/span>\n            {todos.map((todo) => <Todo<\/span> key<\/span>={todo.id}<\/span> todo<\/span>={todo}<\/span> toggleTodo<\/span>={toggleTodo}<\/span> deleteTodo<\/span>={deleteTodo}<\/span> \/><\/span>)}\n        <\/div<\/span>><\/span><\/span>\n    )\n}\n\nexport<\/span> default<\/span> Todos;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Finally, the todo<\/code> item is separated into a new component Todo.tsx<\/code>. This component receives each todo item as a prop and also the deleteTodo<\/code> and toggleTodo<\/code> methods:<\/p>\n\n\n
import<\/span> { MdRadioButtonChecked } from<\/span> 'react-icons\/md'<\/span>;\nimport<\/span> { MdRadioButtonUnchecked } from<\/span> 'react-icons\/md'<\/span>;\nimport<\/span> { AiOutlineDelete } from<\/span> 'react-icons\/ai'<\/span>;\n\nconst<\/span> Todo = ({ todo, toggleTodo, deleteTodo }<\/span>) =><\/span> {\n    return<\/span> (\n        <div<\/span> className<\/span>=\"todo__container \"<\/span>><\/span>\n            <div<\/span> className<\/span>=\"todo__checkbox\"<\/span> onClick<\/span>={()<\/span> =><\/span> toggleTodo(todo.id)}>\n                {todo.completed ? <MdRadioButtonChecked<\/span> className<\/span>='icon checked'<\/span> \/><\/span> : <MdRadioButtonUnchecked<\/span> className<\/span>='icon'<\/span> \/><\/span>}\n            <\/div<\/span>><\/span>\n            <div<\/span> className<\/span>={todo.completed<\/span> ? 'todo__text<\/span> complete<\/span>' :<\/span> 'todo__text<\/span>'}><\/span>\n                <p<\/span>><\/span>{todo.text}<\/p<\/span>><\/span>\n            <\/div<\/span>><\/span>\n            <div<\/span> className<\/span>=\"todo__delete\"<\/span> onClick<\/span>={()<\/span> =><\/span> deleteTodo(todo.id)}>\n                <AiOutlineDelete<\/span> className<\/span>='icon'<\/span> \/><\/span>\n            <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n    )\n}\n\nexport<\/span> default<\/span> Todo;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
With the todo application in place, let\u2019s proceed to write integration tests for the component.<\/p>\n\n\n\n
Writing Integration Test<\/h2>\n\n\n\n
To understand how integration testing works, you’ll be introduced to the methods contained in the @testing-library\/react<\/code> library and how to use them by first writing a sample test before testing the Todo component.<\/p>\n\n\n\n
Example test<\/h3>\n\n\n\n
For the example test, you’ll test the heading text if it truly exists in the component. You’ll use the render method and screen object from @testing-library\/react <\/code>library to render the component and execute the getByText<\/code> method.<\/p>\n\n\n\n
\n
\ud83d\udca1 The render<\/a> method is used to specify the component to be tested, while the screen<\/a> object holds several query methods<\/a> that can be used to access elements within the DOM. An example of this query is the getByText<\/code> method<\/a>.<\/p>\n<\/blockquote>\n\n\n
import<\/span> { render, screen } from<\/span> '@testing-library\/react'<\/span>;\nimport<\/span> '@testing-library\/jest-dom'<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
\u2139\ufe0f I imported @testing-library\/jest-dom<\/code>, which is a companion library for React Testing Library and would help run your test methods. Some methods like toBeInTheDocument()<\/code> is not part of React Testing Library<\/a>, so you will need to install jest-dom<\/a> to enable it. <\/p>\n\n\n\n
This article demonstrates how to use Jest with React<\/a>.<\/p>\n<\/blockquote>\n\n\n\n
In App.test.tsx<\/code>, add the following:<\/p>\n\n\n
import<\/span> { render, screen } from<\/span> '@testing-library\/react'<\/span>;\nimport<\/span> '@testing-library\/jest-dom'<\/span>;\nimport<\/span> App from<\/span> '.\/App'<\/span>;\n\ntest('if the heading is correct'<\/span>, () => {\n    render(<App<\/span> \/><\/span><\/span>);\n    const<\/span> headingElement = screen.getByText(\/Todo's\/i<\/span>);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code block above, the “if the heading is correct<\/strong>” test block uses the render<\/code> and screen<\/code> methods. The render method renders the App<\/code> component and the screen method retrieves the element with the text \u201cTodo\u2019s<\/strong>\u201d. The element is stored in the headingElement<\/code> variable.<\/p>\n\n\n\n
\n
\ud83d\udca1 When naming your tests, use descriptive names. Also, when passing text identifiers into methods like the getByText()<\/code> method, you can use string or regex as seen below, but regex is preferred as it makes it easy to ignore casing using the i<\/code> flag.<\/p>\n\n\n
screen.getByText('Todo'<\/span>s');\nscreen.getByText(\/Todo'<\/span>s\/i);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre><\/blockquote>\n\n\n\n
This test renders the component to be tested, gets the element with the “Todo’s<\/strong>” text, and checks if it exists in the document. When you run the test with `npm run test`, you will notice it passes:<\/p>\n\n\n
PASS src\/App.test.tsx\n\u2713 if the heading is correct (13 ms)\n\nTest Suites: 1 passed, 1 total\nTests: 1 passed, 1 total\nSnapshots: 0 total\nTime: 0.325 s, estimated 1 s\nRan all test suites.<\/code><\/span><\/pre>\n\n\n
Now that you understand how the render and screen method work, let’s write the test for adding single and multiple todos and deleting a todo.<\/p>\n\n\n\n
Test adding and displaying a single todo<\/h3>\n\n\n\n
This will test across all the components and check if adding a new todo item will work or throw an error. To do this, you will create a new test, give it your preferred name, and then render the component to be tested (which is App.tsx<\/code>):<\/p>\n\n\n
import<\/span> { render, screen, fireEvent } from<\/span> '@testing-library\/react'<\/span>;\nimport<\/span> '@testing-library\/jest-dom'<\/span>;\nimport<\/span> App from<\/span> '.\/App'<\/span>;\n\ntest('typing into input and displaying todo'<\/span>, () => {\n    render(<App<\/span> \/><\/span><\/span>);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Then you can proceed to retrieve the input element and the button element using the screen method. You can retrieve these elements with any property or attribute of your choice, such as the placeholder text for the input and lots more.<\/p>\n\n\n
const<\/span> inputElement = screen.getByPlaceholderText(\/Add a new todo ...\/i<\/span>);\nconst<\/span> buttonElement = screen.getByRole('button'<\/span>, { name<\/span>: \/Add Todo\/i<\/span> });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The code above retrieve the input element with the placeholder value, which will check your code for any placeholder with the value “Add a new todo \u2026<\/strong>” and store the input element in the inputElement<\/code> variable. Secondly, it will get the button using the getByRole<\/code> query, which searches for any button with the value “Add Todo<\/strong>“.<\/p>\n\n\n\n
You can now test adding a value to the input element and click the “Add Todo<\/strong>” button. You will do this with the fireEvent<\/code> method. This method allows you to fire events to simulate user actions such as click events, change events, and lots more.<\/p>\n\n\n
import<\/span> { render, screen, fireEvent } from<\/span> '@testing-library\/react'<\/span>;\nimport<\/span> '@testing-library\/jest-dom'<\/span>;\nimport<\/span> App from<\/span> '.\/App'<\/span>;\n\ntest('typing into input and displaying todo'<\/span>, () => {\n    render(<App<\/span> \/><\/span><\/span>);\n    const<\/span> inputElement = screen.getByPlaceholderText(\/Add a new todo ...\/i<\/span>);\n    const<\/span> buttonElement = screen.getByRole('button'<\/span>, { name<\/span>: \/Add Todo\/i<\/span> });\n    fireEvent.change(inputElement, { target<\/span>: { value<\/span>: 'Send a mail to Dad'<\/span> } });\n    fireEvent.click(buttonElement);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
\u2139\ufe0f You need to import the fireEvent method<\/code> from @testing-library\/react<\/code> so you can use it within your test file.<\/p>\n<\/blockquote>\n\n\n\n
In the code above, you are testing the add todo form by adding a new todo with the value “Send a mail to Dad” into the inputElement<\/code> and then clicking the buttonElement<\/code>.<\/p>\n\n\n\n
The last step would be to validate the test by checking if this todo item is added to the Todo component. You can use the screen<\/code> method and the expect<\/code> assertion to check if it exists in the DOM\/document.<\/p>\n\n\n
const<\/span> todoElement = screen.getByText(\/Send a mail to Dad\/i<\/span>);\nexpect(todoElement).toBeInTheDocument(); <\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Overall, the entire test for typing into input and displaying todo will look like this:<\/p>\n\n\n
import<\/span> { render, screen, fireEvent } from<\/span> '@testing-library\/react'<\/span>;\nimport<\/span> '@testing-library\/jest-dom'<\/span>;\nimport<\/span> App from<\/span> '.\/App'<\/span>;\n\ntest('typing into input and displaying todo'<\/span>, () => {\n    render(<App<\/span> \/><\/span><\/span>);\n    const<\/span> inputElement = screen.getByPlaceholderText(\/Add a new todo ...\/i<\/span>);\n    const<\/span> buttonElement = screen.getByRole('button'<\/span>, { name<\/span>: \/Add Todo\/i<\/span> });\n    fireEvent.change(inputElement, { target<\/span>: { value<\/span>: 'Send a mail to Dad'<\/span> } });\n    fireEvent.click(buttonElement);\n    const<\/span> todoElement = screen.getByText(\/Send a mail to Dad\/i<\/span>);\n    expect(todoElement).toBeInTheDocument();\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
When you run the test, it will display the outcomes indicating that all tests passed:<\/p>\n\n\n
PASS src\/App.test.tsx\n\u2713 typing into input and displaying todo (39 ms)\n\nTest Suites: 1 passed, 1 total\nTests: 1 passed, 1 total\nSnapshots: 0 total\nTime: 0.477 s, estimated 1 s\nRan all test suites.<\/code><\/span><\/pre>\n\n\n
Test adding and displaying multiple todos<\/h3>\n\n\n\n
So far, you have learned how to test the addition of only one todo, but in the actual sense, you’ll want to have more than one todo in your application, so let’s test by adding multiple todos into the application.<\/p>\n\n\n\n
You might think of repeating some lines of code, but what if you want to add 100 todos? Then it’s not realistic:<\/p>\n\n\n
test('typing into input and displaying muliple todos'<\/span>, () => {\n    render(<App<\/span> \/><\/span><\/span>);\n    const<\/span> inputElement = screen.getByPlaceholderText(\/Add a new todo ...\/i<\/span>);\n    const<\/span> buttonElement = screen.getByRole('button'<\/span>, { name<\/span>: \/Add Todo\/i<\/span> });\n    fireEvent.change(inputElement, { target<\/span>: { value<\/span>: 'Send a mail to Dad'<\/span> } });\n    fireEvent.click(buttonElement);\n    fireEvent.change(inputElement, { target<\/span>: { value<\/span>: 'Get some gifts for Bae'<\/span> },});\n    fireEvent.click(buttonElement);\n    const<\/span> todoElement1 = screen.getByText(\/Send a mail to Dad\/i<\/span>);\n    expect(todoElement1).toBeInTheDocument();\n    const<\/span> todoElement2 = screen.getByText(\/Get some gifts for Bae\/i<\/span>);\n    expect(todoElement2).toBeInTheDocument();\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Instead of having to repeat these lines, you can create a function to handle the addition of multiple todos so you can use a loop:<\/p>\n\n\n
const<\/span> addTodo = (todos<\/span>) =><\/span> {\n    const<\/span> inputElement = screen.getByPlaceholderText(\/Add a new todo ...\/i<\/span>);\n    const<\/span> buttonElement = screen.getByRole('button'<\/span>, { name<\/span>: \/Add Todo\/i<\/span> });\n    todos.forEach((todo<\/span>) =><\/span> {\n        fireEvent.change(inputElement, { target<\/span>: { value<\/span>: todo } });\n        fireEvent.click(buttonElement);\n    });\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This function will receive an array of todos<\/code>, then loops through these todos to add them to your application. You can call this function and pass in all the todos within your test:<\/p>\n\n\n
test('typing into input and displaying all todos'<\/span>, () => {\n    render(<App<\/span> \/><\/span><\/span>);\n    addTodo(['Send a mail to Dad'<\/span>, 'Get some gifts for Bae'<\/span>]);\n    const<\/span> todoElements = screen.queryAllByTestId('todo'<\/span>);\n    expect(todoElements.length).toBe(4<\/span>);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Finally, you’ll need to validate your test.  In the previous test, you checked if the todo added was in the document by using expect(todoElement).toBeInTheDocument()<\/code>, but since you now have more than one todo, doing so for each can be time-consuming. Instead, you can check for the number of todos in your DOM if the number matches what you are expecting.<\/p>\n\n\n\n
For example, looking through the application, you’ll notice that two todo<\/code> items were added to the todo<\/code> state at the beginning. This means that because you are adding two new items, you expect four todos to appear on the DOM, which is why the number four is used in the following assertion:<\/p>\n\n\n
expect(todoElements.length).toBe(4<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
When you run the test, you will notice it passes:<\/p>\n\n\n
PASS src\/App.test.tsx\nApp\n\u2713 typing into input and displaying all todos (41 ms)\n\nTest Suites: 1 passed, 1 total\nTests: 1 passed, 1 total\nSnapshots: 0 total\nTime: 0.595 s, estimated 1 s\nRan all test suites.<\/code><\/span><\/pre>\n\n\n
But suppose you estimated the total number of elements to be two, then it will throw an error and explain the cause of the error:<\/p>\n\n\n
FAIL src\/App.test.tsx\n    App\n    \u2715 typing into input and displaying all todos (42<\/span> ms)\n\n    \u25cf App > typing into input and displaying all todos\n\n    expect(received).toBe(expected) \/\/ Object.is equality<\/span>\n\n    Expected<\/span>: 2<\/span>\n    Received<\/span>: 4<\/span>\n\n        33<\/span> | addTodo(['Send a mail to Dad'<\/span>, 'Get some gifts for Bae'<\/span>]);\n        34<\/span> | const<\/span> todoElements = screen.queryAllByTestId('todo'<\/span>);\n    > 35<\/span> | expect(todoElements.length).toBe(2<\/span>);\n            | ^\n        36<\/span> | });\n        37<\/span> | });\n        38<\/span> |\n\n        at Object<\/span>.<anonymous> (src\/App.test.tsx:35<\/span>:31<\/span>)\n        at TestScheduler.scheduleTests (node_modules\/@jest\/core\/build\/TestScheduler.js:333<\/span>:13<\/span>)\n        at runJest (node_modules\/@jest\/core\/build\/runJest.js:404<\/span>:19<\/span>)\n\nTest Suites: 1<\/span> failed, 1<\/span> total\nTests<\/span>: 1<\/span> failed, 1<\/span> total\nSnapshots<\/span>: 0<\/span> total\nTime<\/span>: 0.482<\/span> s, estimated 1<\/span> s\nRan all test suites.<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Performing multiple tests<\/h3>\n\n\n\n
Suppose you want a dedicated test for each function\/feature of your application in one test file. You can use the describe<\/code> method, which works like the test<\/code> method but can hold more than one test<\/code>:<\/p>\n\n\n
import<\/span> { render, screen, fireEvent } from<\/span> '@testing-library\/react'<\/span>;\nimport<\/span> '@testing-library\/jest-dom'<\/span>;\nimport<\/span> App from<\/span> '.\/App'<\/span>;\n\nconst<\/span> addTodo = (todos<\/span>) =><\/span> {\n    const<\/span> inputElement = screen.getByPlaceholderText(\/Add a new todo ...\/i<\/span>);\n    const<\/span> buttonElement = screen.getByRole('button'<\/span>, { name<\/span>: \/Add Todo\/i<\/span> });\n    todos.forEach((todo<\/span>) =><\/span> {\n        fireEvent.change(inputElement, { target<\/span>: { value<\/span>: todo } });\n        fireEvent.click(buttonElement);\n    });\n};\n\ndescribe('App'<\/span>, () => {\n    test('typing into input and displaying one todo'<\/span>, () => {\n        render(<App<\/span> \/><\/span><\/span>);\n        const<\/span> inputElement = screen.getByPlaceholderText(\/Add a new todo ...\/i<\/span>);\n        const<\/span> buttonElement = screen.getByRole('button'<\/span>, { name<\/span>: \/Add Todo\/i<\/span> });\n        fireEvent.change(inputElement, { target<\/span>: { value<\/span>: 'Send a mail to Dad'<\/span> } });\n        fireEvent.click(buttonElement);\n        const<\/span> todoElement = screen.getByText(\/Send a mail to Dad\/i<\/span>);\n        expect(todoElement).toBeInTheDocument();\n    });\n\n    test('typing into input and displaying all todos'<\/span>, () => {\n        render(<App<\/span> \/><\/span><\/span>);\n        addTodo(['Send a mail to Dad'<\/span>, 'Get some gifts for Bae'<\/span>]);\n        const<\/span> todoElements = screen.queryAllByTestId('todo'<\/span>);\n        expect(todoElements.length).toBe(4<\/span>);\n    });\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
\u2139\ufe0f The describe<\/code> method or block is a test suite<\/strong> used to hold more than one test (test case<\/strong>). This describe<\/code> block has two parameters like the test<\/code> block: the name or identifier (a string) and a callback function to hold all your test<\/code> blocks or cases.<\/p>\n<\/blockquote>\n\n\n\n
In the above, you have two tests, one will check if you can add one todo item to your application, and the second will check if you can add multiple todos. When you run the code, it will indicate that two tests passed and also list the names of the tests (identifiers):<\/p>\n\n\n
PASS src\/App.test.tsx\nApp\n\u2713 typing into input and displaying one todo (34 ms)\n\u2713 typing into input and displaying all todos (11 ms)\n\nTest Suites: 1 passed, 1 total\nTests: 2 passed, 2 total\nSnapshots: 0 total\nTime: 0.314 s, estimated 1 s\nRan all test suites.<\/code><\/span><\/pre>\n\n\n
Test deleting a todo<\/h3>\n\n\n\n
Finally, let’s also test how you can select a single todo and delete it from your application just like you’d do if it were manual testing. You can also use a function to get the todo, the container, and the delete button to fire a click event.<\/p>\n\n\n
const<\/span> deleteTodo = (todo<\/span>) =><\/span> {\n    const<\/span> todoElement = screen.getByText(todo);\n    const<\/span> todoElementContainer = todoElement.closest('div'<\/span>);\n    const<\/span> deleteButton = within(todoElementContainer).getByTestId('delete'<\/span>);\n    fireEvent.click(deleteButton);\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The function receives a todo; you then write test instructions to look for the todo element and get the entire todo container to be removed using the closest<\/code> method. Then get the deleteButton<\/code> from within the todoElementContainer<\/code> and fire a click event that removes the todo. You can call this function in the test:<\/p>\n\n\n
test('if delete button is working'<\/span>, () => {\n    render(<App<\/span> \/><\/span><\/span>);\n    addTodo(['Send a mail to Dad'<\/span>, 'Get some gifts for Bae'<\/span>]);\n    deleteTodo('Send a mail to Dad'<\/span>);\n    const<\/span> todoElements = screen.queryAllByTestId('todo'<\/span>);\n    expect(todoElements.length).toBe(3<\/span>);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the test, you can add new todos with the addTodo()<\/code> function, then call the deleteTodo()<\/code> function by passing the todo<\/code> to be deleted. To assert this test (if one has deleted), you can check your application’s total number of todos<\/code>. This is done by checking the length \u2014 meaning it must have reduced from four to three.<\/p>\n\n\n\n
This is what the entire test, alongside other tests, looks like:<\/p>\n\n\n
import<\/span> { render, screen, fireEvent, within } from<\/span> '@testing-library\/react'<\/span>;\nimport<\/span> '@testing-library\/jest-dom'<\/span>;\nimport<\/span> App from<\/span> '.\/App'<\/span>;\n\nconst<\/span> addTodo = (todos<\/span>) =><\/span> {\n    const<\/span> inputElement = screen.getByPlaceholderText(\/Add a new todo ...\/i<\/span>);\n    const<\/span> buttonElement = screen.getByRole('button'<\/span>, { name<\/span>: \/Add Todo\/i<\/span> });\n    todos.forEach((todo<\/span>) =><\/span> {\n        fireEvent.change(inputElement, { target<\/span>: { value<\/span>: todo } });\n        fireEvent.click(buttonElement);\n    });\n};\n\nconst<\/span> deleteTodo = (todo<\/span>) =><\/span> {\n    const<\/span> todoElement = screen.getByText(todo);\n    const<\/span> todoElementContainer = todoElement.closest('div'<\/span>);\n    const<\/span> deleteButton = within(todoElementContainer).getByTestId('delete'<\/span>);\n    fireEvent.click(deleteButton);\n};\n\ndescribe('App'<\/span>, () => {\n    test('typing into input and displaying one todo'<\/span>, () => {\n        render(<App<\/span> \/><\/span><\/span>);\n        const<\/span> inputElement = screen.getByPlaceholderText(\/Add a new todo ...\/i<\/span>);\n        const<\/span> buttonElement = screen.getByRole('button'<\/span>, { name<\/span>: \/Add Todo\/i<\/span> });\n        fireEvent.change(inputElement, {\n            target<\/span>: { value<\/span>: 'Send a mail to Dad'<\/span>},\n        });\n        fireEvent.click(buttonElement);\n        const<\/span> todoElement = screen.getByText(\/Send a mail to Dad\/i<\/span>);\n        expect(todoElement).toBeInTheDocument();\n    });\n\n    test('typing into input and displaying all todos'<\/span>, () => {\n        render(<App<\/span> \/><\/span><\/span>);\n        addTodo(['Send a mail to Dad'<\/span>, 'Get some gifts for Bae'<\/span>]);\n        const<\/span> todoElements = screen.queryAllByTestId('todo'<\/span>);\n        expect(todoElements.length).toBe(4<\/span>);\n    });\n\n    test('if delete button is working'<\/span>, () => {\n        render(<App<\/span> \/><\/span><\/span>);\n        addTodo(['Send a mail to Dad'<\/span>, 'Get some gifts for Bae'<\/span>]);\n        deleteTodo('Send a mail to Dad'<\/span>);\n        const<\/span> todoElements = screen.queryAllByTestId('todo'<\/span>);\n        expect(todoElements.length).toBe(3<\/span>);\n    });\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
When you run the test, you will notice that three tests have passed:<\/p>\n\n\n
PASS src\/App.test.tsx\nApp\n\u2713 typing into input and displaying one todo (43<\/span> ms)\n\u2713 typing into input and displaying all todos (21<\/span> ms)\n\u2713 if<\/span> delete<\/span> button is working (18<\/span> ms)\n\nTest Suites: 1<\/span> passed, 1<\/span> total\nTests<\/span>: 3<\/span> passed, 3<\/span> total\nSnapshots<\/span>: 0<\/span> total\nTime<\/span>: 0.737<\/span> s, estimated 1<\/span> s\nRan all test suites.<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Run the test in the sandbox below:<\/p>\n\n\n\n\t
At this point, the heading element has been stored in the headingElement<\/code> variable. You can now use the expect()<\/code> assertion method<\/a> to test if any element with the text “Todo’s<\/strong>” exist:<\/p>\n\n\n\n