React、Jest 和测试库：TypeError：使用 findBy（例如 findByAltText）时无法读取 null 的属性“createEvent”

Question

问题

当我尝试使用 Jest、React 和测试库运行测试时，npm test出现以下错误：

错误

/node_modules/react-dom/cjs/react-dom.development.js:3905
      var evt = document.createEvent('Event');
                         ^

TypeError: Cannot read property 'createEvent' of null
    at Object.invokeGuardedCallbackDev (/node_modules/react-dom/cjs/react-dom.development.js:3905:26)
    at invokeGuardedCallback (/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
    at flushPassiveEffectsImpl (/node_modules/react-dom/cjs/react-dom.development.js:23543:11)
    at unstable_runWithPriority (/node_modules/scheduler/cjs/scheduler.development.js:468:12)
    at runWithPriority$1 (/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
    at flushPassiveEffects (/node_modules/react-dom/cjs/react-dom.development.js:23447:14)
    at Object.<anonymous>.flushWork (/node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
    at Immediate.<anonymous> (/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1003:11)
    at processImmediate (node:internal/timers:464:21)
/node_modules/react-dom/cjs/react-dom.development.js:3905
      var evt = document.createEvent('Event');

Answer 1

它一直是测试库

在我几乎失去理智后，我发现解决这个问题很简单。我不小心让我的 IDE 自动完成，findByAltText而不是我通常使用的：getByAltText。要求findBy测试为 且async调用为await。

破碎的

 it('displays the logo', () => {
    const logo = screen.findByAltText('Logo')
    expect(logo).toBeInTheDocument()
  })

固定的

需求：async以及await使用时findBy

 it('displays the logo', async () => {
    const logo = await screen.findByAltText('Logo')
    expect(logo).toBeInTheDocument()
  })

另外一个选择

getBy就像我习惯的那样使用！

 it('displays the logo', () => {
    const logo = screen.getByAltText('Logo')
    expect(logo).toBeInTheDocument()
  })

奖金

通过我的研究我发现：eslint-plugin-testing-library，它至少可以通过你的 linter 警告你这个问题。确保遵循其设置。

https://github.com/testing-library/eslint-plugin-testing-library