1. Let's say we are implementing a Jest test and we have a variable called result, which we want to check isn't null. How can we do this with Jest matcher functions?

expect(result).not.toBeNull()

2. Let's say we have variable called person that is of type IPerson:

interface IPerson {
  id: number;
  name: string;
}

We want to check that the person variable is { id: 1, name: "bob" }. How can we do this with Jest matcher functions?

expect(person).not.toBeEqual({ id: 1, name: "bob" });

3. Is it possible to carry out our check in the last question with a Jest snapshot test? If so how?

Yes:

expect(person).toMatchSnapshot();

4. We have implemented a component called CheckList, which renders text from an array in a list. Each list item has a checkbox so that the user can select list items. The component has a function prop called onItemSelect that is called when a user selects an item by checking the checkbox. We are implementing a test to verify that the onItemSelect prop works. The following line of code renders the component in the test:

const { container } = render(<SimpleList data={["Apple", "Banana", "Strawberry"]} onItemSelect={handleListItemSelect} />);

How can we use a Jest mock function for handleListItemSelect and check that it is called?

const handleListItemSelect = jest.fn();
const { container } = render(<SimpleList data={["Apple", "Banana", "Strawberry"]} onItemSelect={handleListItemSelect} />);

// TODO - select the list item

expect(handleListItemSelect).toBeCalledTimes(1);

5. In the implementation of SimpleList in the last question, the onItemSelect function takes in a parameter called item which is the string value that the user has selected. In our test, let's pretend we have already simulated the user selecting "Banana" . How can we check the onItemSelect function was called with the item parameter being "Banana"?

expect(handleListItemSelect).toBeCalledWith("Banana");

6. In the implementation of SimpleList in the last two questions, the text is displayed using a label that is tied to the checkbox is using the for attribute. How can we use functions in React Testing Library to firstly locate the "Banana" checkbox and then check it?

const checkbox = getByLabelText("Banana") as HTMLInputElement;
fireEvent.change(checkbox, {
  target: { checked: true }
});

7. In this chapter, we found out the coverage was low in our code that rendered posts from the JSONPlaceholder REST API. One of the areas that wasn't covered was handling HTTP error codes in the componentDidMount function when we get the posts from the REST API. Create a test to cover this area of code:

test("When the post GET request errors when the page is loaded, an error is shown", async () => {
  const mock = new MockAdapter(axios);
  mock.onGet("https://jsonplaceholder.typicode.com/posts").reply(404);

  const { getByTestId } = render(<App />);

  const error: any = await waitForElement(() => getByTestId("error"));

  expect(error).toMatchSnapshot();
});

A test ID needs to be added to the App component code:

{this.state.error && <p className="error" data-testid="error">{this.state.error}</p>}