Jest & Hooks：TypeError：无法读取未定义的属性"Symbol(Symbol.iterator)"

Question

在创建反应应用程序中，我正在尝试用笑话进行简单的测试，但我收到此错误：TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined.

我的组件AppBarUser的一部分.js

/...

const AppBarUser = () => {
const classes = useStyles();
const [, formDispatch] = useContext(FormContext);
const [t] = useContext(TranslationContext);
const [openDrawer, setDrawer] = useState(false);
const [userInfos, setData] = useState({});
useEffect(() => {
const fetchData = async () => {
try {
const result = await axiosGET(`${domain}/users/profile?id_user=${decode().id}`);
setData(result[0]);
formDispatch({ type: 'SET_SQUADMEMBERS', squadMembers: [{ value: result[0].id, label: result[0].label, isFixed: true }] })
} catch (error) {
console.log(error)
}
};
fetchData();
}, []);
/...
export default AppBarUser;

在 App.js 中像这样初始化：

import TranslationContext from './contexts/translationContext';
import FormContext from './contexts/formContext';
import formReducer, { formInitialState } from './reducers/formReducer';
/...
const App = () => {
const [formState, formDispatch] = useReducer(formReducer, formInitialState);
const [t, setLocale, locale] = useTranslation();
return(
<TranslationContext.Provider value={[t, setLocale, locale]} >
<FormContext.Provider value={[formState, formDispatch]} >
<HomeComponent /> 
</FormContext.Provider>
</TranslationContext.Provider>
)
/...
}
/...

App |_HomeComponent |_ AppBarComponent
         
|_ AppBarUser
  

AppBarUser.test.js

import React from 'react';
import { shallow } from 'enzyme';
import AppBarUser from './AppBarUser';
it('AppBarUser should render properly', () => {
shallow(<AppBarUser />)
});

结果如下：

TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
19 | 
20 | 
> 21 | const AppBarUser = () => {
|                          ^
22 | 
23 |     const classes = useStyles();
24 | 
at _iterableToArrayLimit (node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js:8:22)
at _slicedToArray (node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray.js:8:33)
at AppBarUser (src/components/AppBarUser.jsx:21:26)
at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:758:32)
at render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:636:55)
at fn (node_modules/enzyme-adapter-utils/src/Utils.js:99:18)
at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:636:20)
at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:265:22)
at shallow (node_modules/enzyme/build/shallow.js:21:10)
at Object.<anonymous>.it (src/components/AppBarUser.test.js:6:5)

当我在 AppBarUser 中删除.jsconst [, formDispatch] = useContext(FormContext); const [t] = useContext(TranslationContext);和所有相关变量时，测试通过。

我是开玩笑测试的初学者，请有人帮我吗？

Answer 1

尝试将AppBarUser包装在它期望从中接收上下文的上下文提供程序中。钩子正在接收上下文的未定义值。

import React from 'react';
import { shallow } from 'enzyme';
import AppBarUser from './AppBarUser';
import TranslationContext from './contexts/translationContext';
import FormContext from './contexts/formContext';
it('AppBarUser should render properly', () => {
shallow(
<TranslationContext.Provider value={[/* Whatever context mocks needed */]} >
<FormContext.Provider value={[/* Whatever context mocks needed */]} >
<AppBarUser />
</FormContext.Provider>
</TranslationContext.Provider>
);
});

根据测试的不同，您可能还需要进行完全安装而不是浅层安装。