javascript 如何在笑话和酶中为 useState Hook 设置初始状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/57025753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set initial state for useState Hook in jest and enzyme?
提问by Srigar
Currently Im using functional component with react hooks. But i unable to test the useState Hook completely. Consider a scenario like, in useEffect hook i'm doing api call and setting value in the useState. For jest/enzyme i have mock data to test but i unable to set initial state value for useState in jest.
目前我使用带有反应钩子的功能组件。但我无法完全测试 useState Hook。考虑这样一个场景，在 useEffect 钩子中，我正在执行 api 调用并在 useState 中设置值。对于玩笑/酶，我有模拟数据要测试，但我无法在玩笑中为 useState 设置初始状态值。
const [state, setState] = useState([]);
const [state, setState] = useState([]);
I want to set initial state as array of object in jest. I could not find any setState function as similar like class component.
我想在玩笑中将初始状态设置为对象数组。我找不到任何类似于类组件的 setState 函数。
回答by Jimmy
You can mock React.useStateto return a different initial state in your tests:
您可以模拟React.useState以在测试中返回不同的初始状态：
// Cache original functionality
const realUseState = React.useState
// Stub the initial state
const stubInitialState = ['stub data']
// Mock useState before rendering your component
jest
.spyOn(React, 'useState')
.mockImplementationOnce(() => realUseState(stubInitialState))
Reference:https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga
参考：https : //dev.to/theactualgivens/testing-react-hook-state-changes-2oga
回答by hesto2
If I recall correctly, you should try to avoid mocking out the built-in hooks like useStateand useEffect. If it is difficult to trigger the state change using enzyme's invoke(), then that may be an indicator that your component would benefit from being broken up.
如果我没记错的话，您应该尽量避免模拟useState和useEffect. 如果使用酶的 很难触发状态变化invoke()，那么这可能表明您的组件将从分解中受益。
回答by ireshika piyumalie
- Below function will return state
- 下面的函数将返回状态
const setHookState = (newState) => jest.fn().mockImplementation(() => [ newState, () => {}, ]);
const setHookState = (newState) => jest.fn().mockImplementation(() => [ newState, () => {}, ]);
- Add below to use react
- 添加以下以使用反应
const reactMock = require('react');
const reactMock = require('react');
In your code, you must use React.useState()to this work, else it won't work
在你的代码中，你必须习惯React.useState()这个工作，否则它不会工作
const [arrayValues, setArrayValues] = React.useState();
const [isFetching, setFetching] = React.useState();
const [arrayValues, setArrayValues] = React.useState();
const [isFetching, setFetching] = React.useState();
- Then in your test add following, mock state values
- 然后在您的测试中添加以下模拟状态值
reactMock.useState = setHookState({ arrayValues: [], isFetching: false, });
reactMock.useState = setHookState({ arrayValues: [], isFetching: false, });
Inspiration: Goto
灵感：转到
