使用@testing-library/react 测试农业网格

Question

我正在尝试测试使用 ag-grid 的组件。

当我进行断言以检查是否呈现具有给定文本的单元格时，我收到以下错误：

expect(received).toBeInTheDocument() received value must be an HTMLElement or an SVGElement. Received has type: object Received has value: HERE IS EXPECTED HTML FOR THE CELL I'VE BEEN LOOKING FOR

我已经为这个问题创建了代码沙箱（参见 grid.test.tsx）https://codesandbox.io/s/weathered-silence-4l1s1

Answer 1

看起来 ag-grid 对 DOM 做了些什么。在测试中渲染 ag-grid 后，它会破坏所有在 codesandbox 中使用时检查 dom（甚至对于网格外的元素！）的断言。我知道 codesandbox 使用的是真正的浏览器 dom 而不是 jsdom.

我设法让它在我的本地机器上运行，但我不得不切换到 jsdom 14（检查 https://github.com/ianschmitz/jest-environment-jsdom-fourteen）。

我还需要在我的测试设置中添加此代码（ag-grid 使用 innerText 而不是 textContent，没有它我在渲染的单元格中没有文本）

Object.defineProperty(global.window.Element.prototype, 'innerText', {
  set(value) {
    this.textContent = value;
  },
  configurable: true
})

使用@testing-library/react 测试农业网格

Testing ag-grid with @testing-library/react

ag-grid

react-testing-library