Jest.js 使用useAsyncStorage测试自定义react本地钩子

olhwl3o2 于 2023-04-10 发布在 Jest

关注(0)|答案(1)|浏览(170)

如何测试自定义的react native hook，其中包含useAsyncStorage hook？
这是我的钩子：

export const useCustomHook = () => {
  const storage = useAsyncStorage('item');
  const [state, setState] = useState<string | null>(null);
  useEffect(() => {
    if (!state) {
      storage.getItem().then(value => {
        setState(value ?? 'some value');
      });
    }
  }, [state, storage]);

  return state;
};

我尝试使用react本地测试库和jest来测试它。但是当我呈现钩子时得到错误（0，_asyncStorage.useAsyncStorage）不是一个函数
这是测试的一部分，即使没有预期，钩子也不会呈现

import AsyncStorage from '../../../__mocks__/@react-native-async-storage/async-storage';
jest.mock('@react-native-async-storage/async-storage/jest/async-storage-mock');
describe('Test hook', () => {
  beforeEach(async () => {
    await AsyncStorage.setItem('item', 'value');
  });
  it('Should return item', () => {
    const { result } = renderHook(() => {
      useCustomHook();
    });
  });
});

jestjs

来源：https://stackoverflow.com/questions/75939469/test-custom-react-native-hook-with-useasyncstorage-inside

1条答案

按热度按时间

lymgl2op1#

好的，我注意到你从模拟中导入了它，这是正确的做法。
您需要做的是通过自己实现包的方法和模块来模拟模块。
在为AsyncStorage创建的模拟模块中
我相信你有这样的：

export module 'AsyncStorage' {

   getItem: jest.fn(),
   ...

}

因此，您需要在这个模拟模块中添加钩子的模拟实现。
以下是AsyncStorage钩子API的文档，
你需要的改变是这样的：

export module 'AsyncStorage' {

   getItem: jest.fn(),
   // NOTE I just added the function as a type but this should be the 
   // implementation instead, so replace this with jest.fn() or whatever you 
   // are expecting the function to return / do
   useAsyncStorage: () => ({
      getItem: (
        callback?: ?(error: ?Error, result: string | null) => void,
       ) => Promise<string | null>,

   )}
   ...

}

赞(0）回复(0）举报 2023-04-10

我来回答

Jest.js 使用useAsyncStorage测试自定义react本地钩子

1条答案

相关问题

热门标签

最新问答