个人中心
gpt4 book ai didi

reactjs - React 测试库 - 组件未使用模拟 Service Worker 响应

转载 作者：行者123 更新时间：2023-12-05 04:36:36 27 4
gpt4 key购买 nike

我有一个应用程序可以获取用户列表并显示它们。该应用程序按预期工作，但测试失败:

用户.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;

我已经使用 steps outlined here 设置了 MSW .

处理程序.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();
});

我错过了什么？测试渲染的输出不显示模拟响应数据。

TestingLibraryElementError:无法找到包含文本的元素:Xavi Alonzo

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

最佳答案

Users.test.js 有两个问题

  1. 需要添加async/await
  2. 使用 findByText 而不是 getByText

通过这些更改，测试通过:

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

查看documentation getBy... 和 findBy...

的区别

关于reactjs - React 测试库 - 组件未使用模拟 Service Worker 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70797402/

27 4 0
文章推荐： sql - 根据连续日期计算排名(如果日期之间有间隔天数，则返回 1)
文章推荐： python - python 如何知道何时传入 `self` ？
文章推荐： r - 使用 purrr::walk 保存文件 - 无效的 'description' 参数
文章推荐： next.js - 下一张图片未在生产中加载
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com