Skip to main content

Testing Lab 1: Your First Component Test


  • Install React Testing Library
  • Create Your First Component Test


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 keeptrack
    cd keeptrack
    git checkout lab25


    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 install


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


    npm test


    yarn test
  7. Press a to run all tests.

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

    FAIL  src/App.test.js
    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.js

  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.js

Create Your First Component Test

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

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


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

    test("renders home heading", () => {
    render(<HomePage />);
  3. Verify the test passes.

    PASS  src/home/HomePage.test.js

You have completed Testing Lab 1