Jestjs Jest无法读取属性'；createEvent'；空的

我试图模拟被拒绝的值，但得到了这个错误。奇怪的是，这种构造在“success”

addUser.mockImplementation（value=>jest.fn（）.mockResolvedValue（value））

的情况下起作用，但当我试图用同样的技巧拒绝时，它不起作用，并说“无法读取null的“createEvent”属性”

这是我的测试用例

it（'接收无效值并抛出错误'，async（）=>{
addUser.mockImplementation（（）=>
jest.fn（）.mockRejectedValue（新错误（'Sample Error'））
)
const-enqueueSnackbar=jest.fn（）
useSnackbar.mockReturnValue（{enqueueSnackbar}）
const{emailInput，form，submitButton}=setup（）
等待动作（异步（）=>{
填写（emailInput，'sample@mail.com')
})
expect（emailInput.value）.toBe（'sample@mail.com')
expect（submitButton）.toHaveProperty（'disabled'，false）
等待动作（异步（）=>{
fireEvent.submit（表格）
})
期望（在Snackbar中排队）。已被调用时间（1）
expect（enqueueSnackbar）.toHaveBeenCalledWith（`Sample error`）{
变体：“错误”
})})

---

有人知道怎么做吗？

这似乎对我有用，但我无法解释。尝试删除act（）包装器，并在调用fireEvent函数后立即使用wait

  fireEvent.submit(form);
  await wait();

这似乎是谷歌“无法读取null属性'createEvent'时发现的#1问题，因此将此答案留给这些读者：

对我来说，这个错误是在测试过程中出现的。
当执行一系列测试时，某些测试或其他测试通常会因此错误而失败，并且没有指示出哪里出了问题。但答案不是测试，而是组件本身：

这是一个未经修改的API调用。
在一个钩子中进行了一个API调用，该钩子在测试失败的组件中使用。显然，Jest在完成测试后清理了所有内容，当调用返回时，它没有发现任何东西，因此出错了

模仿钩子解决了这个问题

---

如果有人遇到这样的错误，请确保模拟您拥有的任何异步逻辑，特别是当它返回时与DOM交互时。

waitFor

已经在引擎盖下使用了

act

，因此无需在那里使用

act

块

我知道您提到的错误，但我复制它的方式是使用

waitFor

而不使用

wait

，类似这样：

it('receives invalid value and throws an error', async () => {
  addUser.mockImplementation(() =>
    jest.fn().mockRejectedValue(new Error('Sample error'))
  )

await screen.findByText('Sample Error message reflected in your component')

... rest of your tests ...

it（'works'，async（）=>{
render（）；
//（此处有一些设置）
waitFor（（）=>{//注意，我们不是在等待这个承诺
期望（某些变化）成为文件（）；
});
});

你能试试吗

it（'接收无效值并抛出错误'，async（）=>{
addUser.mockImplementation（（）=>
jest.fn（）.mockRejectedValue（新错误（'Sample Error'））
)
const-enqueueSnackbar=jest.fn（）
useSnackbar.mockReturnValue（{enqueueSnackbar}）
const{emailInput，form，submitButton}=setup（）
填写（emailInput，'sample@mail.com“）//这是在引擎盖下使用fireEvent，对吗？
等待等待（（）=>{
expect（emailInput.value）.toBe（'sample@mail.com')
expect（submitButton）.toHaveProperty（'disabled'，false）
});
fireEvent.submit（表格）
等待等待（（）=>{
期望（在Snackbar中排队）。已被调用时间（1）
expect（enqueueSnackbar）.toHaveBeenCalledWith（`Sample error`）{
变体：“错误”
})
});
})

我在使用

mockImplementation（（）=>Promise）

（返回一些Promise）和

wait waitFor（（）=>…）

时遇到了一些问题

如果您使用的是

react测试库

，则可以使用

findBy

query解决此问题，该查询是

getBy

查询和

waitFor

的组合。唯一的缺点是您必须找到一些可视的东西（文本、数据测试id、标签等），这些东西可以告诉您已经调用了mock函数。在代码中，您可以尝试以下操作：

it('receives invalid value and throws an error', async () => {
  addUser.mockImplementation(() =>
    jest.fn().mockRejectedValue(new Error('Sample error'))
  )

await screen.findByText('Sample Error message reflected in your component')

... rest of your tests ...

---

})

当我遇到同样的错误消息时，我发现在更新了包含

await

的预期后，我忘记了将测试函数声明为

async

真正的

addUser

函数是什么样子的？看起来您可能想要

adduser.mockImplementation（（）=>Promise.reject（新错误（'Sample Error'））

，这意味着“当调用add user时，返回一个被拒绝的承诺并带有样例错误”，而当前测试代码意味着“当调用add user时，返回一个函数，当调用该函数时，返回一个被拒绝的承诺，并带有示例错误”。我猜您想要第一个，但如果没有看到

addUser

函数或

addUser.mockRejectedValue（新错误（'sample error'），则很难知道）

这与

addUser.mockImplementation（（）=>Promise.reject（新错误（'Sample Error'）））相同。

我遇到了同样的问题，我认为由于act函数重复出现而引发了错误。如果我只使用一个act离开测试，它不会崩溃（问题是我需要使用act两次）。有可能吗？如果有人能解释这一点，我会非常高兴。另外，在react native testing library文档中，他们说，

wait

被弃用，取而代之的是

waitFor

。我正等着有人解释我为什么会遇到同样的问题，这对我来说很有效，但后来我意识到这是一个假阳性。尝试改变对应该失败的事情的期望。