使用react-testing-library进行测试卸载

Question

我对何时/如何更新查询的元素感到困惑。 例如：

我有一个计数的按钮。 当计数到3时，它消失了。

import React, { useState } from "react";

export default () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      {count < 3 && (
        <button onClick={() => setCount(count + 1)}>{count}</button>
      )}
    </div>
  );
};

我正在像这样测试它：

test("Counter counts up and disappears", () => {
  const { queryByText } = render(<App" />);

  const button = queryByText("0");
  expect(button.textContent).toEqual("0");

  fireEvent.click(button);
  expect(button.textContent).toEqual("1");

  fireEvent.click(button);
  expect(button.textContent).toEqual("2");

  fireEvent.click(button);
  expect(button).toBe(null);
});

测试失败，并显示以下错误：

expect(received).toBe(expected)

Expected value to be (using ===):
  null
Received:
  <button>2</button>

为什么按钮元素知道其文本内容已更改？ 每次单击后，我们不需要运行queryByText("1")和queryByText("2") 。

为什么不知道最后一次单击后按钮已被卸载？ 而且，如果我们要检查它确实为null，则需要执行queryByText("3") 。

这是代码沙箱： https : //codesandbox.io/s/react-testing-library-demo-76zhi

Answer 1

我猜这是关于react-dom和jsdom （也用于测试）如何工作的。

（请纠正我，或者让我知道猜测是否可以接受！我将删除它。）

1. 由queryByText返回的按钮类型为HtmlElment

2. react或react-dom只是将dom操作的任务减至最少，最终jsdom仍会执行文本更改和按钮删除工作。

3. 由于测试工具使用的是jsdom ，因此我检查了代码的removeChild部分，并认为它们遵循W3C规范 。 我假设在dom操纵级别上， jsdom作用类似于浏览器。 因此，我模拟了您的代码，如下所示：

 const btn = document.getElementById('btn'); const btnContainer = document.getElementById('btnContainer'); btn.textContent = '1'; console.log('btn after click 1: ' + btn); btn.textContent = '2'; console.log('btn after click 2: ' + btn); btnContainer.removeChild(btn); console.log('btn after removed: '+ btn); 

 <div id='btnContainer'><button id='btn'>0<button></div> 

4. 如您所见，从div删除后， btn变量仍然是[object HTMLButtonElement]也许类似于对包含已定义对象的数组使用splice ，初始obj仍然保持不变吗？

 const obj = { 'a': 1}; const arr = [obj]; arr[0]['a'] = 2; arr.splice(0, -1); console.log(obj) 

---

因此，我认为更多是关于javascript中垃圾回收的工作原理 。

另外，也许不重用查询结果，而在这种情况下总是再次查询，结果将更加可预期。

---

PS我发现有一个方法调用toBeInTheDocument ！