React 測試庫 - 組件未使用的 Mock Service Worker 響應

Question

我有一個應用程序可以獲取用戶列表並顯示它們。 該應用程序按預期工作，但測試失敗：

用戶.js

import React from 'react';

function Users() {
  const [users, setUsers] = React.useState([]);

  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data))
  }, [])

  return (
    <div>
      {users.map(user => {
        return (
          <h3 key={user.id}>{user.name}</h3>
        )
      })}
    </div>
  );
}

export default Users;

我已經使用此處列出的步驟設置了 MSW。

handlers.js

import { rest } from 'msw';

export const handlers = [
  rest.get('https://jsonplaceholder.typicode.com/users', (req, res, ctx) => {
    return res(
      ctx.json([
        { id: 1, name: 'Xabi Alonzo' },
        { id: 2, name: 'Lionel Messi' }
      ])
    )
  })
];

服務器.js

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

setupTests.js

import '@testing-library/jest-dom';
import { server } from './mocks/server.js';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

用戶.test.js

import { render, screen } from '@testing-library/react';
import Users from './Users';

test('Renders a list of users', () => {
  render(<Users />);
  const text = screen.getByText('Xavi Alonzo');
  expect(text).toBeInTheDocument();
});

我錯過了什么？ 測試渲染的 output 不顯示模擬響應數據。

TestingLibraryElementError：無法找到帶有文本的元素：Xavi Alonzo

<body>
  <div>
    <div />
  </div>
</body>

Answer 1

Users.test.js 有兩個問題

需要添加異步/等待
使用findByText而不是 getByText

通過這些更改，測試通過：

test('Renders a list of users', async () => {
  render(<Users />);
  const text = await screen.findByText('Xabi Alonzo');
  expect(text).toBeInTheDocument();
});

查看文檔以了解getBy...和findBy...之間的區別

React 測試庫 - 組件未使用的 Mock Service Worker 響應

問題描述

1 個解決方案

解決方案1
0 2022-01-23 06:48:10

React 測試庫 - 組件未使用的 Mock Service Worker 響應

問題描述

1 個解決方案

解決方案1 0 2022-01-23 06:48:10

解決方案1
0 2022-01-23 06:48:10