gpt4 book ai didi

reactjs - "TypeError: react.useContext is not a function"使用 React 测试库模拟上下文提供程序时

转载 作者:行者123 更新时间:2023-12-04 15:17:21 29 4
gpt4 key购买 nike

我正在尝试确定在使用 React Context 进行 Jest 测试时如何最好地模拟提供者。我发现的最有希望的线索是 RTL,它在他们的文档中提供了以下示例:https://testing-library.com/docs/example-react-context
我一直在尝试多种结构,但即使我密切关注他们的例子,我也会收到上述错误。
在这里,我在测试我的 Dialog 组件时几乎完全按照他们的示例进行操作:
Jest 测试

import React from 'react';
import { render } from '@testing-library/react';
import { DialogContext, defaultState } from '../../../../store/contexts/dialogContext';

const customRender = (ui, { providerProps, ...renderOptions }) => {
return render(
<DialogContext.Provider {...providerProps}>{ui}</DialogContext.Provider>,
renderOptions
);
};

it('Dialog should work', async () => {
const providerProps = {
dialogType: 'CANCEL',
...defaultState,
};
const { container } = customRender(<Dialog />, { providerProps });
const results = await axe(container);

expect(results).toHaveNoViolations();
});

对话框组件
import React, { useContext } from 'react';
import { DialogContext } from '../../../store/contexts/dialogContext';

export default function Dialog() {
const [dialogState, dialogDispatch] = useContext(DialogContext);

//logic

return (
<div id='dialog'/>
);
}
这是我的 Dialog 组件的简化版本,但是一旦它在第 2 行调用 useContext(),我就会收到以下错误。
Error: Uncaught [TypeError: (0 , _react.useContext) is not a function or its return value is not iterable]
由于“React”在相关文件的范围内,并且我正在密切关注 RTL 示例,因此我很难过。欢迎提供模拟提供者的其他方式的解决方案或建议。
编辑:为清楚起见,添加 dialogContext 文件。当不在 Jest 流程中时,组件和上下文工作正常。
import React, { createContext, useReducer } from 'react';
import { dialogReducer } from '../reducers/dialogReducer';

export const DialogContext = createContext({});
const { Provider } = DialogContext;

export const defaultState = {
//state object
}

export const DialogProvider = ({ children }) => {
const [state, reducer] = useReducer(dialogReducer, defaultState);

return <Provider value={[state, reducer]}>{children}</Provider>
}
当 DialogContext 从 Dialog 组件(前一行)中记录时,它看起来像预期的那样:
{ '$$typeof': Symbol(react.context),
_calculateChangedBits: null,
_currentValue: undefined,
_currentValue2: {},
_threadCount: 0,
Provider: { '$$typeof': Symbol(react.provider), _context: [Circular] },
Consumer:
{ '$$typeof': Symbol(react.context),
_context: [Circular],
_calculateChangedBits: null },
_currentRenderer: {},
_currentRenderer2: null }

最佳答案

错误 is ambiguous并且可能真正发生在 useContext 时未定义,当 useContext是一个函数,但不返回可迭代(数组)。
如果 Jest 配置不正确并且 react 可能会发生第一种情况包作为 CommonJS 模块导入,并转换为 ES 模块 default通过模块互操作导入。
第二种情况是对错误最简单的解释。上下文提供程序未提供数组值,因此 useContext不返回数组。除非 defaultState对象包含 value具有数组值的属性,...defaultState传播将导致错误的提供者值(value)。
提供者值应在测试中以与在应用程序中相同的方式提供:

<Provider value={[state, reducer]}>...
如果打算不使用 dialogReducer在测试中,可以提供一个 spy :
<DialogContext.Provider value={[defaultState, mockedDispach]}>...
否则 DialogProvider可以用来代替 DialogContext.Provider因为它已经提供了预期的提供者值(value)。

关于reactjs - "TypeError: react.useContext is not a function"使用 React 测试库模拟上下文提供程序时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64081681/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com