https://frontendmasters.com/courses/intermediate-react-v2/snapshots-watch-mode-test-coverage/

Snapshot testing

Continued from before

  //    ****        __test__/SearchParams.test.js        ****

import React from "react";
import { render, fireEvent, cleanup } from "react-testing-library";
import pet, { _breeds, _dogs, ANIMALS } from "@frontendmasters/pet";
import SearchParams from "../SearchParams";

afterEach(cleanup);

test("SearchParams", async () => {
  const { container, getByTestId, getByText } = render(<SearchParams />);

  ....

  // on first render it will save dump all the markup
  // and from then on, compare against this
  // it will auto populate the
  // toMatchInlineSnapshot(... auto populate here with markup...)
  expect(container.firstChild).toMatchInlineSnapshot();//...will be auto populated by the render output
});

Snaptshot testing is a low effort but low confidence testing.

npm run test -u to update the snapshot.

Some more npm test scripts:

  +    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch",
+    "test:update": "jest -u"

Test coverage

The test coverage uses Instanbul. It also creates a coverage directory coverage/lcov/index.html shows a nice dashboard with all the details.

Brian doesn't believe that code coverage is a good indicator of code quality. If you have 100% code coverage, you are writing too many tests.