使用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 ！