Javascript 测试使用useEffect钩子和apollo的自定义上下文钩子
我已经创建了一个上下文,它公开了一个钩子以便于使用。 在这个钩子中,我已经确保在呈现页面之前预加载了一些数据,如下所示:Javascript 测试使用useEffect钩子和apollo的自定义上下文钩子,javascript,reactjs,react-hooks,react-testing-library,react-hooks-testing-library,Javascript,Reactjs,React Hooks,React Testing Library,React Hooks Testing Library,我已经创建了一个上下文,它公开了一个钩子以便于使用。 在这个钩子中,我已经确保在呈现页面之前预加载了一些数据,如下所示: export const MyContext = React.createContext({} as any); function useMyContext() { const context = React.useContext(MyContext); if (context === undefined) { throw new Error('useMyC
export const MyContext = React.createContext({} as any);
function useMyContext() {
const context = React.useContext(MyContext);
if (context === undefined) {
throw new Error('useMyContext must be used within a MyContext');
}
return context;
}
function MyContextProvider(props: any) {
const client = useApolloClient();
const { user } = React.useContext(UserContext);
const [data, setData ] = React.useState({});
const findSomethingFromUser = () => {
return client.query({
query: FIND_SOMETHING_FROM_USER,
variables: { userId: user.id },
});
};
const load = () => {
findSomethingFromUser()
.then(({ data, errors }) => {
setData(data);
});
};
// Load user test
React.useEffect(load, []);
return (
<MyContext.Provider value={{ data }}>
{children}
</MyContext.Provider>
);
}
export { MyContextProvider, useMyContext };
它悲哀地说电流为零。我认为这是因为useffect
导致状态更新,因此首先返回null(默认值)。在更新之前。这就是为什么我引入了waitForNextUpdate
但是,这样会产生以下错误:
警告:传递给TestRenderer.act(…)函数的回调不能返回任何内容
It looks like you wrote TestRenderer.act(async () => ...) or returned a Promise from it's callback. Putting asynchronous logic inside TestRenderer.act(...) is not supported.
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:102
Warning: Do not await the result of calling TestRenderer.act(...), it is not a Promise.
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:102
Warning: An update to MyContextProvider inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
关于如何解决这个问题有什么想法吗?在阅读之后,我决定模拟useReducer
,因为调度会导致useffect
钩子中的状态更新。在那之后,它起了作用。我现在模拟减速器的初始状态
const dispatch = jest.fn();
const useReducerSpy = jest.spyOn(React, 'useReducer');
useReducerSpy.mockImplementation((init: any) => [MY_CONTEXT_MOCK, dispatch]);
我的测试看起来像
it('should render', async () => {
const { result } = renderHook(useMyContext, { wrapper: bySlugWrapper });
expect(result.current.somevar).toEqual(MY_CONTEXT.somevar);
});
it('should render', async () => {
const { result } = renderHook(useMyContext, { wrapper: bySlugWrapper });
expect(result.current.somevar).toEqual(MY_CONTEXT.somevar);
});