Chapter 8

December 13

Chapter 8 summary

08_01 Using Create React App as a testing platform

See the commands in package.json that we have. Look at the “scripts” key. Note there’s a key/value pair for test just as there is for start.
Fire up the chapter’s start app (npm start). In another terminal, run npm test and note the command line output.
npm test will run anything with the .test.js extension. Examine what’s in App.test.js.

08_02 Testing small functions with Jest

create-react-app already has Jest configured. So all we need to do is start writing tests. Create a functions.js file and a functions.text.js file in the /src directory.

In functions.test.js, stub out a test:

test("Multiplies by two", () => {
      expect()
    });

Then in functions.js, stub out the function we’re going to test:
```
export default function timesTwo() {}
```
Then back in functions.text.js import the function at the top:
```
import timesTwo from "./functions.js"
```
Then change the test to:
```
expect(timesTwo(4)).toBe(8);
```
Then run npm test
It fails because we haven’t defined the function. So, build out the function:
```
export default function timesTwo(a) {
      return a * 2;
    }
```
Now the test should pass.

08_03 Introducing React Testing Library

React Testing Library comes with React.
Create a new file for a new component called Star. And create a test file for that component star.test.js (in the /src directory).
Inside Star.js our component is simple and will just return an <h1>

export function Star() {
  return <h1>Cool Star</h1>;
}

In star.test.js

test("renders an h1", () => {});

Then add an import for render:

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

Then fill out the test. We can use React Testing Library utilities to render our component even though we’re not using it anywhere. Final should look like this:
```
test("renders an h1", () => {
  const { getByText } = render(<Star />);
  const h1 = getByText(/Cool Star/);
  expect(h1).toHaveTextContent("Cool Star");
});
```
Run npm test; it fails
We need to import Star!
```
import { Star } from "./Star";
```
Now Star.test.js should pass. Tip: you can hit a in the terminal to rerun all tests.
Note that here we’re testing our component without even rendering it (similar bullet above).

08_04 Testing events with React Testing Library

Create a new component called Checkbox (add a Checkbox.js file) and also a test file for it: Checkbox.test.js. Recreate the component from an earlier lesson. We used useReducer. Checkbox.js:

import { useReducer } from "react";

export function Checkbox() {
  const [checked, setChecked] = useReducer((checked) => !checked, false);
  return (
    <>
    <label>{checked ? "checked" : "not checked"}</label>
    <input type="checkbox" value={checked} onChange={setChecked} />
    </>
  );
}

Start writing the test. In Checkbox.test.js

test("Selecting checkbox should change value to true", () => {});

Add this inside the callback function:

const { getByLabelText } = render(<Checkbox />);

And with that the two imports we’ll need:

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

import { Checkbox } from "./Checkbox";

Add what we’ll test for checkbox which (right below the other getByLabelText line):
```
const checkbox = getByLabelText(/not checked/i);
```
Now we start to write the event test with fireEvent
Import fireEvent after render (comes with @testing-library/react.

After the const checkbox line add:

fireEvent.click(checkbox);
expect(checkbox.checked).toEqual(true);

This is us firing the event and running our assertion.
Run npm test
It fails. We need to associate the label with the input. Add an htmlFor=”checked” to the label in