问题
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