如何使用 Jest 和 React 测试库测试 React 应用程序

1git clone https://github.com/do-community/doggy-directory

1[secondary_label Output]
2Cloning into 'doggy-directory'...
3remote: Enumerating objects: 64, done.
4remote: Counting objects: 100% (64/64), done.
5remote: Compressing objects: 100% (48/48), done.
6remote: Total 64 (delta 21), reused 55 (delta 15), pack-reused 0
7Unpacking objects: 100% (64/64), 228.16 KiB | 3.51 MiB/s, done.

1cd doggy-directory

1npm install

1npm start

1[secondary_label Output]
2Compiled successfully!
3
4You can now view doggy-directory in the browser.
5
6Local:            http://localhost:3000
7On Your Network:  http://network_address:3000

1npm test

 1[secondary_label Output]
 2No tests found related to files changed since last commit.
 3Press `a` to run all tests, or run Jest with `--watchAll`.
 4
 5Watch Usage
 6 › Press a to run all tests.
 7 › Press f to run only failed tests.
 8 › Press q to quit watch mode.
 9 › Press p to filter by a filename regex pattern.
10 › Press t to filter by a test name regex pattern.
11 › Press Enter to trigger a test run.

1[label src/App.test.js]
2import { render, screen } from '@testing-library/react';
3import App from './App';
4
5test('renders the landing page', () => {
6  render(<App />);
7});

 1[label src/App.test.js]
 2...
 3test('renders the landing page', () => {
 4  render(<App />);
 5
 6  expect(screen.getByRole("heading")).toHaveTextContent(/Doggy Directory/);
 7  expect(screen.getByRole("combobox")).toHaveDisplayValue("Select a breed");
 8  expect(screen.getByRole("button", { name: "Search" })).toBeDisabled();
 9  expect(screen.getByRole("img")).toBeInTheDocument();
10});

 1[secondary_label Output]
 2 PASS src/App.test.js
 3  ✓ renders the landing page (172 ms)
 4
 5Test Suites: 1 passed, 1 total
 6Tests:       1 passed, 1 total
 7Snapshots:   0 total
 8Time:        2.595 s, estimated 5 s
 9Ran all test suites related to changed files.
10
11Watch Usage: Press w to show more.

 1[label src/mocks/mockFetch.js]
 2const breedsListResponse = {
 3    message: {
 4        boxer: [],
 5        cattledog: [],
 6        dalmatian: [],
 7        husky: [],
 8    },
 9};
10
11const dogImagesResponse = {
12    message: [
13        "https://images.dog.ceo/breeds/cattledog-australian/IMG_1042.jpg ",
14        "https://images.dog.ceo/breeds/cattledog-australian/IMG_5177.jpg",
15    ],
16};
17
18export default async function mockFetch(url) {
19    switch (url) {
20        case "https://dog.ceo/api/breeds/list/all": {
21            return {
22                ok: true,
23                status: 200,
24                json: async () => breedsListResponse,
25            };
26        }
27        case "https://dog.ceo/api/breed/husky/images" :
28        case "https://dog.ceo/api/breed/cattledog/images": {
29            return {
30                ok: true,
31                status: 200,
32                json: async () => dogImagesResponse,
33            };
34        }
35        default: {
36            throw new Error(`Unhandled request: ${url}`);
37        }
38    }
39}

 1[label src/App.test.js]
 2import { render, screen } from '@testing-library/react';
 3import mockFetch from "./mocks/mockFetch";
 4import App from './App';
 5
 6beforeEach(() => {
 7   jest.spyOn(window, "fetch").mockImplementation(mockFetch);
 8})
 9
10afterEach(() => {
11   jest.restoreAllMocks()
12});
13...

 1[secondary_label Output]
 2  console.error
 3    Warning: An update to App inside a test was not wrapped in act(...).
 4
 5    When testing, code that causes React state updates should be wrapped into act(...):
 6
 7    act(() => {
 8      /* fire events that update state */
 9    });
10    /* assert on the output */
11
12    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
13        at App (/home/sammy/doggy-directory/src/App.js:5:31)
14
15      18 |       })
16      19 |       .then((json) => {
17    > 20 |         setBreeds(Object.keys(json.message));
18         |         ^
19      21 |       });
20      22 |   }, []);
21      23 |
22 ...
23
24 PASS src/App.test.js
25  ✓ renders the landing page (429 ms)
26
27Test Suites: 1 passed, 1 total
28Tests:       1 passed, 1 total
29Snapshots:   0 total
30Time:        1.178 s, estimated 2 s
31Ran all test suites related to changed files.

 1[label src/App.test.js]
 2...
 3test('renders the landing page', async () => {
 4   render(<App />);
 5
 6   expect(screen.getByRole("heading")).toHaveTextContent(/Doggy Directory/);
 7   expect(screen.getByRole("combobox")).toHaveDisplayValue("Select a breed");
 8   expect(await screen.findByRole("option", { name: "husky"})).toBeInTheDocument();
 9   expect(screen.getByRole("button", { name: "Search" })).toBeDisabled();
10   expect(screen.getByRole("img")).toBeInTheDocument();
11});

 1[secondary_label Output]
 2 PASS src/App.test.js
 3  ✓ renders the landing page (123 ms)
 4
 5Test Suites: 1 passed, 1 total
 6Tests:       1 passed, 1 total
 7Snapshots:   0 total
 8Time:        0.942 s, estimated 2 s
 9Ran all test suites related to changed files.
10
11Watch Usage: Press w to show more.

1[label src/App.test.js]
2import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';import userEvent from '@testing-library/user-event'; 
3...

1[label src/App.test.js]
2...
3test("should be able to search and display dog image results", async () => {
4   render(<App />);
5})

 1[label src/App.test.js]
 2...
 3test("should be able to search and display dog image results", async () => {
 4   render(<App />);
 5
 6   //Simulate selecting an option and verifying its value
 7   const select = screen.getByRole("combobox");
 8   expect(await screen.findByRole("option", { name: "cattledog"})).toBeInTheDocument();
 9   userEvent.selectOptions(select, "cattledog");
10   expect(select).toHaveValue("cattledog");
11})

 1[label src/App.test.js]
 2...
 3test("should be able to search and display dog image results", async () => {
 4   render(<App />);
 5
 6   //...Simulate selecting an option and verifying its value
 7
 8  //Simulate initiating the search request
 9   const searchBtn = screen.getByRole("button", { name: "Search" });
10   expect(searchBtn).not.toBeDisabled();
11   userEvent.click(searchBtn);
12
13   //Loading state displays and gets removed once results are displayed
14   await waitForElementToBeRemoved(() => screen.queryByText(/Loading/i));
15})

 1[label src/App.test.js]
 2...
 3test("should be able to search and display dog image results", async () => {
 4   render(<App />)
 5
 6   //...Simulate selecting an option and verifying its value
 7   //...Simulate initiating the search request
 8   //...Loading state displays and gets removed once results are displayed
 9
10   //Verify image display and results count
11   const dogImages = screen.getAllByRole("img");
12   expect(dogImages).toHaveLength(2);
13   expect(screen.getByText(/2 Results/i)).toBeInTheDocument();
14   expect(dogImages[0]).toHaveAccessibleName("cattledog 1 of 2");
15   expect(dogImages[1]).toHaveAccessibleName("cattledog 2 of 2");
16})

 1[label src/App.test.js]
 2import {render, screen, waitForElementToBeRemoved} from '@testing-library/react';
 3import userEvent from '@testing-library/user-event';
 4import mockFetch from "./mocks/mockFetch";
 5import App from './App';
 6
 7beforeEach(() => {
 8   jest.spyOn(window, "fetch").mockImplementation(mockFetch);
 9})
10
11afterEach(() => {
12   jest.restoreAllMocks();
13});
14
15test('renders the landing page', async () => {
16   render(<App />);
17
18   expect(screen.getByRole("heading")).toHaveTextContent(/Doggy Directory/);
19   expect(screen.getByRole("combobox")).toHaveDisplayValue("Select a breed");
20   expect(await screen.findByRole("option", { name: "husky"})).toBeInTheDocument()
21   expect(screen.getByRole("button", { name: "Search" })).toBeDisabled();
22   expect(screen.getByRole("img")).toBeInTheDocument();
23});
24
25test("should be able to search and display dog image results", async () => {
26   render(<App />);
27
28   //Simulate selecting an option and verifying its value
29   const select = screen.getByRole("combobox");
30   expect(await screen.findByRole("option", { name: "cattledog"})).toBeInTheDocument();
31   userEvent.selectOptions(select, "cattledog");
32   expect(select).toHaveValue("cattledog");
33
34   //Initiate the search request
35   const searchBtn = screen.getByRole("button", { name: "Search" });
36   expect(searchBtn).not.toBeDisabled();
37   userEvent.click(searchBtn);
38
39   //Loading state displays and gets removed once results are displayed
40   await waitForElementToBeRemoved(() => screen.queryByText(/Loading/i));
41
42   //Verify image display and results count
43   const dogImages = screen.getAllByRole("img");
44   expect(dogImages).toHaveLength(2);
45   expect(screen.getByText(/2 Results/i)).toBeInTheDocument();
46   expect(dogImages[0]).toHaveAccessibleName("cattledog 1 of 2");
47   expect(dogImages[1]).toHaveAccessibleName("cattledog 2 of 2");
48})

 1[secondary_label Output]
 2 PASS src/App.test.js
 3  ✓ renders the landing page (273 ms)
 4  ✓ should be able to search and display dog image results (123 ms)
 5
 6Test Suites: 1 passed, 1 total
 7Tests:       2 passed, 2 total
 8Snapshots:   0 total
 9Time:        4.916 s
10Ran all test suites related to changed files.
11
12Watch Usage: Press w to show more.