Jest 测试通过但是.. 有控制台消息您正在尝试在 Jest 环境被拆除后访问它的属性或方法

Question

我的测试通过但有一个控制台 refrenceError：

在 Jest 环境被拆除后，您正试图访问它的属性或方法。

测试：

import {render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
import {create, act} from 'react-test-renderer';
import Comp1 from './Comp1';
import ReactDOM from 'react-dom';
import "@testing-library/jest-dom";
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

it('Should wait for response', () => {
    act(() => {
        waitFor(() => {
        render(<QueryClientProvider client={queryClient}><Comp1 /></QueryClientProvider>);
        expect(screen.getByTestId('loading', {}, { timeout: 2000 })).toBeInTheDocument();
        });
    });
});

有任何想法吗？ 这将检查 async/await api 调用的响应。

Answer 1

这是一个异步问题，你需要添加async ， wait ：

it('Should wait for response', async () => {
  render(
    <QueryClientProvider client={queryClient}>
      <Comp1 />
    </QueryClientProvider>
  );

  await waitFor(() => {
        expect(screen.getByTestId('loading', {})).toBeInTheDocument();
   });
});

Answer 2

我的问题是由于在 helper function 中使用异步方法而没有正确使用await引起的。

我们已经提取了一些用于导航的业务逻辑到帮助 function 中，但是当我们复制代码时，我们没有将它变成异步方法。

例如，我们在没有任何承诺或await的情况下使用waitFor ，因此在环境被拆除后会访问上下文，这会导致问题。

如果您看到此错误，请检查您的助手、测试设置和异步方法的其他使用。 即使它们是嵌套的，也肯定是问题所在。