Jest & Hooks : 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.

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;

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>
   )
/...
}

/...

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

Here is the result :

    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)

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 ?

回答1:

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.

来源：https://stackoverflow.com/questions/57407469/jest-hooks-typeerror-cannot-read-property-symbolsymbol-iterator-of-unde