Jest & Hooks : TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

Posted 2023-04-14

【中文标题】Jest & Hooks : TypeError: Cannot read property \'Symbol(Symbol.iterator)\' of undefined

【英文标题】：Jest & Hooks : TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefinedJest & Hooks : TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

【发布时间】：2019-12-15 20:41:40

【问题描述】：

在 create-react-app 中，我尝试用 jest 进行简单测试，但出现此错误：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>
   )
/...


/...

应用程序 |_ 主页组件 |_ 应用栏组件 |_ 应用栏用户

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); 和所有相关变量时，测试通过。

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

【参考方案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>
  );
);

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

【讨论】：

感谢您的回答，但我忘记了一些细节，抱歉……现在已添加。但是我试过了，但错误仍然存​​在