笑话挂钩:TypeError:无法读取未定义的属性'Symbol(Symbol.iterator)' [英] Jest & Hooks : TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

问题描述

在create-react-app中，我正在尝试以开玩笑的方式进行简单测试，但出现此错误:TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined.

In create-react-app, I'm trying to simple test with jest but I'm getting this error : TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined.

我的组件AppBarUser.js的一部分

A part of my component 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中如此初始化:

initialized like this in 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>
   )
/...
}

/...

应用
   | _ HomeComponent
    | _ AppBarComponent
     | _ AppBarUser

App
  |_ HomeComponent
    |_ AppBarComponent
     |_ AppBarUser

AppBarUser.test.js

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.js const [, formDispatch] = useContext(FormContext); const [t] = useContext(TranslationContext);和所有相关变量中删除时，测试通过.

When I remove in AppBarUser.js const [, formDispatch] = useContext(FormContext); const [t] = useContext(TranslationContext); and all associated variables, the test passes.

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

I'm a beginner with testing in jest, please could someone help me ?

推荐答案

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

Try wrapping AppBarUser in the context providers it is expecting to receive contexts from. The hooks are receiving undefined values for the context.

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>
  );
});

根据测试，您可能还需要完全安装而不是浅安装.

Depending on the test you may also need to do a full mount instead of a shallow one.

这篇关于笑话挂钩:TypeError:无法读取未定义的属性'Symbol(Symbol.iterator)'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！