首页 > 解决方案 > 使用 jest 和 enzymne 测试自定义反应钩子时出错

问题描述

当使用带有 jest 和 enzymne 的自定义钩子时,我收到此错误“TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined”

尝试了各种东西,但似乎没有任何效果。请帮忙

import React, { useEffect, useState, Fragment } from 'react';

/* Utils */
import { useSystemContext } from '../../../utils/Context/SystemContextProvider';

/* Components */
import MenuStructure from './MenuStructure';

const Menu = () => {
    const [{ siteData }] = useSystemContext();
    const [open, setOpen] = React.useState(false);

    const openMenu = () => {
        setOpen(!open);
    };

    const componentProps = {
        menuItems: siteData,
        openMenu: openMenu,
        open: open
    };

    return (
        <MenuStructure {...componentProps} />
    )
};

export default Menu;

测试

import { shallow, mount } from 'enzyme';
import Menu from '.';
import { testUseState } from '../../../utils/TestUtils';

describe('<Menu />', () => {
    let wrapper;

    it('calls setCount with 0', () => {

        wrapper = mount(<Menu />);

    });
});

错误

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

       9 | import MenuStructure from './MenuStructure';
      10 | 
    > 11 | const Menu = () => {
         |                    ^
      12 |     const [{ siteData }] = useSystemContext();
      13

根据要求添加了 useSystemContext

import React, { createContext, useContext, useReducer } from 'react';

export const SystemContext = createContext();

export const SystemContextProvider = ({ reducer, initialState, children }) => (
    <SystemContext.Provider value={useReducer(reducer, initialState)}>
        {children}
    </SystemContext.Provider>
);

export const useSystemContext = () => useContext(SystemContext);

这在运行时在站点中运行良好

标签: reactjsjestjsreact-hooks

解决方案


推荐阅读