T1-FirstComponentTests.md

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. Open a command prompt (Windows) or terminal (Mac).

2. Change the current directory to code\keeptrack.

3. You probably DON'T need to DO the steps below but they are listed for completeness.

   If you recently created your React project using Create React App then the following steps to install React Testing Library will have been done for you when the project was created.

   • Run one of the following sets of commands:

     npm

     npm install --save @testing-library/react @testing-library/jest-dom

     Yarn

     yarn add @testing-library/react @testing-library/jest-dom

   • Create the file src\setupTests.ts

   • Add the following code to configure enzyme.

     src\setupTests.ts

     // react-testing-library renders your components to document.body,
     // this adds jest-dom's custom assertions
     import '@testing-library/jest-dom/extend-expect';

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

   npm

   npm test

   Yarn

   yarn test

5. Press a to run all tests.

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

7. Open the file src/App.test.tsx

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

9. 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 App from './App';
   
   test('renders home heading', () => {
     render(<App />);
     expect(screen.getByRole('heading')).toHaveTextContent('Home');
   });

3. Verify the test passes.

   PASS  src/home/HomePage.test.tsx

4. Add a test to verify the component renders a title tag.

   src\home\HomePage.test.tsx

   // ...
   test('renders title tag', () => {
     let wrapper: ShallowWrapper;
     wrapper = shallow(<HomePage />);
     expect(wrapper.exists('h2')).toBeTruthy();
   });

5. Verify the test passes.

   PASS  src/home/HomePage.test.tsx

6. Add a test to verify the component renders a title.

   src\home\HomePage.test.tsx

   // ...
   test('renders title', () => {
     let wrapper: ShallowWrapper;
     wrapper = shallow(<HomePage />);
     expect(wrapper.find('h2').text()).toBe('Home');
   });

7. Verify the test passes.

   PASS  src/home/HomePage.test.tsx

---

✔ You have completed Testing Lab 1