如何用 Jest 測試 document.documentElement？

Question

這是迷你反應項目： https://codesandbox.io/s/shy-monad-n32vv

我盡力讓它盡可能小。 要讓tailwindcss開啟dark mode ，我們需要在document.documentElement的classList中添加"dark" 。 因此，在我們單擊按鈕后，迷你項目將向 classList 添加或刪除（也稱為切換）名稱"dark"的classList 。

它真的很好用。 但是 Jest 測試失敗了。

這是迷你項目中的測試文件：

import { render, fireEvent } from "@testing-library/react";
import App from "./App.js";

test("<App />", () => {
  const { getByText } = render(<App />);
  const darkToggle = getByText("Toggle");
  document.documentElement.classList.remove("dark");
  expect(document.documentElement.classList.contains("dark")).toBe(false);

  fireEvent.click(darkToggle);
  expect(document.documentElement.classList.contains("dark")).toBe(true);
  fireEvent.click(darkToggle);

  // it failed here!!!!
  expect(document.documentElement.classList.contains("dark")).toBe(false);

  fireEvent.click(darkToggle);
  expect(document.documentElement.classList.contains("dark")).toBe(true);
});

我讀了很多，但找不到有用的東西。 JSDOM 的 Mocking DOM 看起來不起作用 - 看起來新版本 Jest 的默認環境是 JSDOM。 我也未能測試localStorage（我刪除了迷你項目中的那些），我希望那些失敗是因為同樣的錯誤。

我的猜測：使用 Redux 后，測試失敗。 我認為測試失敗是因為createAsyncThunk 。 但我仍然不知道。

編輯：我發現這會有所幫助： https://stackoverflow.com/a/51045733/13031497

編輯：我解決了。 但是看起來codesandbox仍然會引發錯誤？

Answer 1

經過嘗試，我發現await new Promise(process.nextTick); 做得很好。

我認為因為createAsyncThunk的 function 會在測試后更改數據——真的很糟糕。 如果有一些 function 在數據已經改變后可以休眠一段時間，那將是最好的：！！ 我找到這個頁面： https://stackoverflow.com/a/51045733/13031497 ，它告訴我更改測試文件，如：

  import { render, fireEvent } from "@testing-library/react";
  import App from "./App.js";
  
  test("<App />", () => {
    const { getByText } = render(<App />);
    const darkToggle = getByText("Toggle");
    document.documentElement.classList.remove("dark");
    expect(document.documentElement.classList.contains("dark")).toBe(false);
  
    fireEvent.click(darkToggle);
 +  await new Promise(process.nextTick);
    expect(document.documentElement.classList.contains("dark")).toBe(true);
 +
    fireEvent.click(darkToggle);
- 
-   // it failed here!!!!
 +  await new Promise(process.nextTick);
    expect(document.documentElement.classList.contains("dark")).toBe(false);
  
    fireEvent.click(darkToggle);
 +  await new Promise(process.nextTick);
    expect(document.documentElement.classList.contains("dark")).toBe(true);
  });

然后測試通過。