如何用 Jest 测试 document.documentElement？答案

【问题标题】：How to test the document.documentElement with Jest?如何用 Jest 测试 document.documentElement？
【发布时间】：2022-01-27 00:37:02
【问题描述】：

这里是迷你反应项目：https://codesandbox.io/s/shy-monad-n32vv

我尽我所能使它尽可能小。要让tailwindcss 打开dark mode，我们需要将"dark" 添加到document.documentElement 的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 模拟 DOM 看起来是行不通的 -- 看起来新版本 Jest 的默认 env 是 JSDOM。我也未能测试localStorage（我在迷你项目中删除了那些），我希望那些失败是因为同样的错误。

我的猜测：使用 Redux 后，测试失败。我认为测试失败是因为createAsyncThunk。但我还是不知道。

已编辑：我发现这会有所帮助：https://stackoverflow.com/a/51045733/13031497

已编辑：我解决了。但是看起来codeandbox还是会报错？

【问题讨论】：

标签： javascript reactjs redux jestjs

【解决方案1】：

经过尝试，我发现await new Promise(process.nextTick);做得很好。

我认为是因为createAsyncThunk 的函数会在测试后改变数据——真的很糟糕。如果有一些功能可以在数据已经更改后的一段时间内休眠，那将是最好的！！！我找到这个页面：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);
  });

然后测试通过。

【讨论】：