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