前端之家

  1. 首页
  2. 问答

React测试库/ Jest更新未包装在act（...）中

• 问答

在测试过程中，我一直在收到有关行为的错误消息。

警告：测试中没有对EmployeesDashboard进行更新 包裹在act（...）中。

When testing,code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */


    in EmployeesDashboard (at EmployeesDashboard.test.tsx:69)"

我不知道为什么，因为似乎我已经将所有内容都包装在表演中了...在这里我也应该包装在表演中呢？由于我是测试的新手，所以将不胜感激。

import React from 'react';
import { mocked } from 'ts-jest/utils';
import { act } from 'react-dom/test-utils';
import { EmployeesDashboard } from '../EmployeesDashboard';
import {
  render,wait,waitForElementToberemoved,} from '@testing-library/react';

import { Employee } from '@neurocann-ui/types';
import { getall } from '@neurocann-ui/api';

jest.mock('@neurocann-ui/api');


const fakeEmployees: Employee[] = [
  {
    email: 'joni@gmail.com',phone: '720-555-555',mailingAddress: {
      type: 'home',streetOne: '390 Blake St',streetTwo: 'Apt 11',city: 'Denver',state: 'CO',zip: '90203',},name: 'Joni Baez',permissions: ['Employee'],hireDate: new Date('2020-09-19T05:13:12.923Z'),{
    email: 'joni22@gmail.com',];

mocked(getall).mockImplementation(
  (): Promise<any> => {
    return Promise.resolve({ data: fakeEmployees });
  },);
describe('EmployeesDashboard',() => {
  it('renders progress loader',() => {
    act(() => {
        render(<EmployeesDashboard />)
    });
    const employeesDashboard = document.getElementById(
      'simple-circular-progress',);
    expect(employeesDashboard).toBeInTheDocument();
    expect(employeesDashboard).toMatchsnapshot();
  });
  it('renders a table',async () => {
    await act(() => { render(<EmployeesDashboard />) });
    const table = document.getElementById('employees-table');
    expect(table).toBeInTheDocument();
  });
});

yhwx_88 回答：React测试库/ Jest更新未包装在act（...）中

通常，这意味着您需要等待其他东西显示出来，然后才能将EmployeesDashboard包含在文档中。首先等待其他内容，例如页面的标题或标题。试试：

it('renders progress loader',async () => {
    
    const {findByText} = render(<EmployeesDashboard />)
    await findByText("something else");
    const employeesDashboard = document.getElementById(
      'simple-circular-progress',);
    expect(employeesDashboard).toBeInTheDocument();
    expect(employeesDashboard).toMatchSnapshot();
  });

,

尝试在您的模拟游戏中添加计时器。

代替：

mocked(getAll).mockImplementation(
  (): Promise<any> => {
    return Promise.resolve({ data: fakeEmployees });
  },);

尝试：

mocked(getAll).mockImplementation(() => {
  return new Promise(resolve => {
    setTimeout(() => resolve(123),0);
  });
});
actjestjsreact-testing-librarytesting
本文链接：https://www.f2er.com/1489027.html

大家都在问