如何在笑话和酶中为 useState Hook 设置初始状态？

Question

目前我使用带有反应钩子的功能组件。但我无法useState完全测试钩子。考虑这样一个场景，在useEffect钩子中，我正在执行 API 调用并在useState. 对于玩笑/酶，我模拟了要测试的数据，但我无法useState在玩笑中设置初始状态值。

const [state, setState] = useState([]);

我想在玩笑中将初始状态设置为对象数组。我找不到任何类似于类组件的 setState 函数。

Answer 1

您可以模拟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))

参考： https : //dev.to/theactualgivens/testing-react-hook-state-changes-2oga

Answer 2

首先，您不能在组件中使用解构。例如，您不能使用：

import React, { useState } from 'react';
const [myState, setMyState] = useState();

相反，您必须使用：

import React from 'react'
const [myState, setMyState] = React.useState();

然后在您的test.js文件中：

test('useState mock', () => {
   const myInitialState = 'My Initial State'

   React.useState = jest.fn().mockReturnValue([myInitialState, {}])
   
   const wrapper = shallow(<MyComponent />)

   // initial state is set and you can now test your component 
}

如果您在组件中多次使用 useState 钩子：

// in MyComponent.js

import React from 'react'

const [myFirstState, setMyFirstState] = React.useState();
const [mySecondState, setMySecondState] = React.useState();

// in MyComponent.test.js

test('useState mock', () => {
   const initialStateForFirstUseStateCall = 'My First Initial State'
   const initialStateForSecondUseStateCall = 'My Second Initial State'

   React.useState = jest.fn()
     .mockReturnValueOnce([initialStateForFirstUseStateCall, {}])
     .mockReturnValueOnce([initialStateForSecondUseStateCall, {}])
   
   const wrapper = shallow(<MyComponent />)

   // initial states are set and you can now test your component 
}
// actually testing of many `useEffect` calls sequentially as shown
// above makes your test fragile. I would recommend to use 
// `useReducer` instead.

Answer 3

如果我没记错的话，您应该尽量避免模拟useState和useEffect. 如果使用酶的 很难触发状态变化invoke()，那么这可能表明您的组件将从分解中受益。

Answer 4

解构解决方案

您不需要使用React.useState- 您仍然可以在组件中解构。

但是您需要按照 useState 调用的顺序编写测试。例如，如果您想模拟两个 useState 调用，请确保它们是组件中的前两个 useState 调用。

在您的组件中：

import React, { useState } from 'react';

const [firstOne, setFirstOne] = useState('');
const [secondOne, setSecondOne] = useState('');

在你的测试中：

import React from 'react';

jest
.spyOn(React, 'useState')
.mockImplementationOnce(() => [firstInitialState, () => null])
.mockImplementationOnce(() => [secondInitialState, () => null])
.mockImplementation((x) => [x, () => null]); // ensures that the rest are unaffected

Answer 5

//Component    
const MyComponent = ({ someColl, someId }) => {
     const [myState, setMyState] = useState(null);

     useEffect(() => {loop every time group is set
         if (groupId) {
             const runEffect = async () => {
                  const data = someColl.find(s => s.id = someId);
                  setMyState(data);
             };
             runEffect();
         }
     }, [someId, someColl]);

     return (<div>{myState.name}</div>);
};

// Test
// Mock
const mockSetState = jest.fn();
jest.mock('react', () => ({
    ...jest.requireActual('react'),
    useState: initial => [initial, mockSetState]
}));
const coll = [{id: 1, name:'Test'}, {id: 2, name:'Test2'}];

it('renders correctly with groupId', () => {
    const wrapper = shallow(
        <MyComponent comeId={1} someColl={coll} />
    );
    setTimeout(() => {
        expect(wrapper).toMatchSnapshot();
        expect(mockSetState).toHaveBeenCalledWith({ id: 1, name: 'Test' });
    }, 100);
});

Answer 6

• 下面的函数将返回状态

const setHookState = (newState) => jest.fn().mockImplementation(() => [
  newState,
  () => {},
]);

• 添加以下以使用反应

const reactMock = require('react');

在你的代码中，你必须习惯React.useState()这个工作，否则它不会工作

const [arrayValues, setArrayValues] = React.useState();

const [isFetching, setFetching] = React.useState();

• 然后在您的测试中添加以下模拟状态值

reactMock.useState = setHookState({ arrayValues: [], isFetching: false, });

灵感：转到