Skip to main content

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

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

    src\home\HomePage.test.js

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

You have completed Testing Lab 1