Testing Lab 1: Your First Component Test

Objectives

• Install React Testing Library
• Create Your First Component Test

Steps

This lab is designed to start with the code after finishing:

Lab 25: Redux with React

Install React Testing Library

1. Make a new directory in your code directory testing.

2. In that directory, download or clone the following branch to start testing.

   git clone https://github.com/craigmckeachie/keeptrack-ts.git keeptrack

   cd keeptrack

   git checkout testing-start

   OR

   Visit this link and click Code > Download

3. Open a command prompt (Windows) or terminal (Mac).

4. Change the current directory to code\testing\keeptrack.

5. Run one of the following commands to install the project dependenciess:

   npm

   npm install

   Yarn

   yarn install

6. Run one of the following commands to run the tests:

   npm

   npm test

   Yarn

   yarn test

7. Press a to run all tests.

8. Verify the test created by Create React App fails.

   FAIL src/App.test.tsx

   Unable to find an element with the text: /learn react/i.

9. Open the keeptrack directory in the editor of your choice and then open the file src/App.test.tsx

10. Update the test code.

    import React from 'react';

    import { render } from '@testing-library/react';

    import App from './App';

    - test('renders learn react link', () => {

    - const { getByText } = render(<App />);

    - const linkElement = getByText(/learn react/i);

    - expect(linkElement).toBeInTheDocument();

    -});

    + test('should render without crashing', () => {

    + render(<App />);

    + });

    Note: We will test the the content (as the generated test was) in a HomePage component test in the next step.

11. Verify the test now passes.

    PASS src/App.test.tsx

Create Your First Component Test

1. Create the file src\home\HomePage.test.tsx.

2. Add a test to verify the component shallow renders without crashing.

   src\home\HomePage.test.tsx

   import React from "react";

   import { render, screen } from "@testing-library/react";

   import HomePage from "./HomePage";

   test("renders home heading", () => {

   render(<HomePage />);

   expect(screen.getByRole("heading")).toHaveTextContent("Home");

   });

3. Verify the test passes.

   PASS src/home/HomePage.test.tsx

---

✔ You have completed Testing Lab 1