如何只监视一个反应钩子useState答案

【问题标题】：How to spy only one react hook useState如何只监视一个反应钩子useState
【发布时间】：2021-08-09 19:21:28
【问题描述】：

我想将测试隔离到目标 useState。

假设我有 3 个 useState，其中一些在我的组件中，一些在这个测试用例的子组件中。

目前，此日志记录了 3 种不同的使用状态。如何定位我想要的那个。假设它被称为 setMovies。

const createMockUseState = <T extends {}>() => {
  type TSetState = Dispatch<SetStateAction<T>>;
  const setState: TSetState = jest.fn((prop) => {
    // if setMovies ???
    console.log('jest - spy mock = ', prop); 
  });
  type TmockUseState =  (prop: T) => [T, TSetState];
  const mockUseState: TmockUseState = (prop) => [prop, setState];

  const spyUseState = jest.spyOn(React, 'useState') as jest.SpyInstance<[T, TSetState]>; 
  spyUseState.mockImplementation(mockUseState);
};
interface Props {
  propertyToTest: boolean
};

describe('Search Movies', () => {
  describe('Onload - do first search()', () => {
    beforeAll(async () => {
      createMockUseState<PROPS>(); 
      wrapper = mount(
          <ProviderMovies>
            <SearchMovies />
          </ProviderMovies>
      );  
      await new Promise((resolve) => setImmediate(resolve));
      await act(
       () =>
        new Promise<void>((resolve) => {
          resolve();
        })
      );
    });

  });
});

【问题讨论】：

标签： reactjs typescript jestjs react-hooks enzyme

【解决方案1】：

我们知道反应钩子取决于每个初始化位置。例如，如果你的组件中有 3 个钩子并且你想模拟 2-nd，你应该用必要的数据模拟 1 和 2。像这样的

//mock for test file
jest.mock(useState); // you should mock here useState from React

//mocks for each it block
const useMockHook = jest.fn(...);

jest.spyOn(React, 'useState').mockReturnValueOnce(useMockHook);

expect(useMockHook).toHaveBeenCalled();
// after that you can check whatever you need

【讨论】：