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

Question

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

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

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

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