时间戳

首页 > 解决方案 > 如何只监视一个反应钩子useState

reactjs - 如何只监视一个反应钩子useState

问题描述

我想将测试隔离到目标 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();
        })
      );
    });

  });
});

标签： reactjstypescriptjestjsreact-hooksenzyme

解决方案

我们知道反应钩子取决于每个初始化位置。例如，如果你的组件中有 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

推荐阅读