Reactjs 使用酶和jest时如何设置测试状态？

首先，我有条件地呈现一个组件，该组件依赖于作为useffect钩子的结果而设置的useState钩子。下面是一个代码示例：

函数组件（）{
const[response，setResponse]=useState（）；
const[fail，setFail]=useState（）；
/**
*@function getModels-获取数据以填充模型
* */
const fetchStuff=async（）=>{
取（'https://jsonplaceholder.typicode.com/todos/1')
。然后（（数据）=>{
常量存储=[数据]；
设置响应（存储）；
setFail（假）；
})
.catch（（错误）=>{
setResponse（err）；
setFail（真）；
});
};
useffect（（）=>{
fetchStuff（）；
}, []);
如果（失败===真）{
返回(

错误：
{fail}

);
}
如果（失败===错误）{
返回(

成功：
{response}

);
}
返回加载屏幕
；
}

---

我目前的争论点是，我无法调用setResponse或setFail并更新fail或response的状态。我相信我需要使用mount而不是浅层渲染？此外，我理解测试哲学会反对以这种方式进行测试。但是，我正在寻找一种能够更新状态的解决方案。任何建议都将不胜感激。

您可以模拟

获取

API调用及其解析值。然后，您可以断言组件渲染的内容。我们应该使用

whenStable

函数来确保模拟的API调用完成

Component.jsx

：

import React，{useState，useffect}来自“React”；
导出函数组件（）{
const[response，setResponse]=useState（）；
const[fail，setFail]=useState（）；
/**
*@function getModels-获取数据以填充模型
* */
const fetchStuff=async（）=>{
取（'https://jsonplaceholder.typicode.com/todos/1')
。然后（（数据）=>{
常量存储=[数据]；
设置响应（存储）；
setFail（假）；
})
.catch（（错误）=>{
setResponse（err）；
setFail（真）；
});
};
useffect（（）=>{
fetchStuff（）；
}, []);
如果（失败===真）{
返回(

错误：
{fail}

);
}
如果（失败===错误）{
返回(

成功：
{response}

);
}
返回加载屏幕
；
}

Component.test.jsx

：

从“React”导入React；
从“./Component”导入{Component}；
从“酶”导入{mount}；
从'react dom/test utils'导入{act}；
常量whenStable=async（）=>{
等待动作（异步（）=>{
等待新承诺（（resolve）=>setTimeout（resolve，0））；
});
};
描述（'65243384'，（）=>{
让我们去拿；
在每个之前（（）=>{
fetch=global.fetch；
});
之后（（）=>{
global.fetch=fetch；
});
它（'should success'，async（）=>{
global.fetch=jest.fn（）.mockResolvedValueOnce（“模拟成功数据”）；
const wrapper=mount（）；
expect（wrapper.find（'p'）.text（））.toBe（'Loading Screen'）；
等待何时稳定（）；
expect（wrapper.find（'p'）.text（））.toBe（'Success:mocked Success data'）；
expect（global.fetch）.toBeCalledWith（'https://jsonplaceholder.typicode.com/todos/1');
});
它（'should fail'，async（）=>{
const mErr=新错误（“网络”）；
global.fetch=jest.fn（）.mockRejectedValueOnce（mErr）；
const wrapper=mount（）；
expect（wrapper.find（'p'）.text（））.toBe（'Loading Screen'）；
等待何时稳定（）；
expect（wrapper.find（'p'）.text（））.toBe（'ERROR:'）；
expect（global.fetch）.toBeCalledWith（'https://jsonplaceholder.typicode.com/todos/1');
});
});

单元测试结果：

 PASS  examples/65243384/Component.test.jsx
  65243384
    ✓ should success (44 ms)
    ✓ should fail (5 ms)

---------------|---------|----------|---------|---------|-------------------
File           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
---------------|---------|----------|---------|---------|-------------------
All files      |     100 |      100 |     100 |     100 |                   
 Component.jsx |     100 |      100 |     100 |     100 |                   
---------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        5.121 s

---

源代码：

因此，我在这里找到了一个解决方案：但这会更新两个useState挂钩的状态。是否有独立设置每个useState钩子的方法？Jimmy的评论链接到mockImplementationOnce