Question

在create-react-app中，我试图通过玩笑进行简单测试，但出现此错误：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.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>
  );
});

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

Jest＆Hooks：TypeError：无法读取未定义的属性“ Symbol（Symbol.iterator）”

1 个答案: