React 測試庫單元測試用例：無法在未安裝的組件上找到節點

Question

我遇到了 React Unit 測試用例的問題。

反應：v18.2 節點 v18.8

創建自定義 function 以使用 ReactIntl 渲染組件。 如果我們在兩個不同的測試用例中使用同一文件中的自定義組件，則第二個測試失敗並出現以下錯誤。

Unable to find node on an unmounted component.

at findCurrentFiberUsingSlowPath (node_modules/react-dom/cjs/react-dom.development.js:4552:13)
at findCurrentHostFiber (node_modules/react-dom/cjs/react-dom.development.js:4703:23)
at findHostInstanceWithWarning (node_modules/react-dom/cjs/react-dom.development.js:28745:21)
at Object.findDOMNode (node_modules/react-dom/cjs/react-dom.development.js:29645:12)
at Transition.performEnter (node_modules/react-transition-group/cjs/Transition.js:280:71)
at node_modules/react-transition-group/cjs/Transition.js:259:27

如果我使用 setTimeout 在不同的文件或測試用例中運行，它會按預期工作並且沒有錯誤。 請在下面找到其他配置。 即使它是相同的測試用例，它也失敗了。

setUpIntlConfig();
beforeAll(() => server.listen());

afterEach(() => {
  server.resetHandlers();
});

afterAll(() => {
  jest.clearAllMocks();
  server.close();
  cleanup();
});

國際配置：

export const setUpIntlConfig = () => {
  if (global.Intl) {
    Intl.NumberFormat = IntlPolyfill.NumberFormat;
    Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
  } else {
    global.Intl = IntlPolyfill;
  }
};

export const RenderWithReactIntl = (component: any) => {
  return {
    ...render(
      <IntlProvider locale="en" messages={en}>
        {component}
      </IntlProvider>
    )
  };
};

我使用 msw 作為模擬服務器。 如果我們缺少任何配置，請指導我們。

測試用例：

test('fire get resource details with data', async () => {
    jest.spyOn(SGWidgets, 'getAuthorizationHeader').mockReturnValue('test-access-token');

    process.env = Object.assign(process.env, { REACT_APP_DIAM_API_ENDPOINT: '' });

    RenderWithReactIntl(<AllocatedAccess diamUserId={diamUserIdWithData} />);
    await waitForElementToBeRemoved(() => screen.getByText(/loading data.../i));

    const viewResource = screen.getAllByText(/view resource/i);
    fireEvent.click(viewResource[0]);
    await waitForElementToBeRemoved(() => screen.getByText(/loading/i));

    const ownerName = screen.getByText(/benedicte masson/i);

    expect(ownerName).toBeInTheDocument();
  });
  
   test('fire get resource details with data----2', async () => {
    jest.spyOn(SGWidgets, 'getAuthorizationHeader').mockReturnValue('test-access-token');

    process.env = Object.assign(process.env, { REACT_APP_DIAM_API_ENDPOINT: '' });

    RenderWithReactIntl(<AllocatedAccess diamUserId={diamUserIdWithData} />);
    await waitForElementToBeRemoved(() => screen.getByText(/loading data.../i));

    const viewResource = screen.getAllByText(/view resource/i);
    fireEvent.click(viewResource[0]);
    await waitForElementToBeRemoved(() => screen.getByText(/loading/i));

    const ownerName = screen.getByText(/benedicte masson/i);

    expect(ownerName).toBeInTheDocument();
  });

Answer 1

您可以嘗試以下更改：

test('fire get resource details with data----2', async () => {
  jest.spyOn(SGWidgets, 'getAuthorizationHeader').mockReturnValue('test-access-token');

  process.env = Object.assign(process.env, { REACT_APP_DIAM_API_ENDPOINT: '' });

  RenderWithReactIntl(<AllocatedAccess diamUserId={diamUserIdWithData} />);
  await waitFor(() => expect(screen.getByText(/loading data.../i)).not.toBeInTheDocument());

  const viewResource = screen.getAllByText(/view resource/i);

  act(() => {
    fireEvent.click(viewResource[0]);
  });

  await waitFor(() => expect(screen.getByText(/loading/i)).not.toBeInTheDocument());

  expect(screen.getByText(/benedicte masson/i)).toBeVisible();
});

在更改屏幕上可見的內容時，我已經養成了使用act()的習慣。 一個很好的指南： https://testing-library.com/docs/guide-disappearance/

不過，在上面的 waitFor() 塊中使用 getBy* 可能會更好地專門檢查文本的不存在。

如果沒有看到您的代碼，很難進一步 go 。 我總是說保持測試簡短而簡單，我們正在測試一件事。 他們越復雜，對不可預見的錯誤所做的更改就越多。 看起來您正在渲染，等待模態關閉，然后單擊，然后是另一個模態關閉，然后屏幕上出現更多文本。 我會把它分成兩個或更多的測試。