Javascript 获得'；arr[Symbol.iterator]不是一个函数'；使用自定义api钩子时

我已经编写了一个自定义钩子，使api调用返回结果和错误（如果存在）。当尝试为使用自定义钩子的组件设置Jest测试权限时，在使用Jest shallow（）时钩子前面会出现'arr[Symbol.iterator]不是函数'或'Cannot read property'Symbol（Symbol.iterator）'的'undefined'

我觉得这是一个api响应与承诺一起工作的问题，所以我尝试了各种不同的方法。这并不能解决问题

我的自定义api挂钩

/* Packages */
import { useEffect, useState } from 'react';

export const useApiCall = (endPoint) => {
    const [hasError, setHasErrors] = useState(false);
    const [fetchData, setFetchData] = useState(null);

    const getData = async () => {
        try {
            const response = await fetch(endPoint);

            if (!response.ok) {
                throw Error(response.statusText);
            }

            const responseJSON = await response.json();

            setFetchData(responseJSON.data);
        }
        catch (error) {
            setHasErrors(true);
        }
    }

    useEffect(() => {
        getData()
    },[])

    return [fetchData, hasError]
}

我的部件使用挂钩

/* Packages */
import React, { useState } from 'react';

/* Utils */
import { useApiCall } from '../../utils/useApiCall';

/* Components */
import FooterStructure from './FooterStructure'

const Footer = () => {
    const [footerLinks, error] = useApiCall('http://www.mocky.io/v2/5d7678f93200000362297bae');
    const [visible, setVisible] = useState();

    const showContent = () => {
        setVisible(!visible);
    }

    const componentProps = {
        footerLinks : footerLinks,
        error : error,
        visible : visible,
        showContent : showContent
    };

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

export default Footer;

/*软件包*/
从“React”导入React，{useState}；
/*乌提尔斯*/
从“../../utils/useApiCall”导入{useApiCall}；
/*组成部分*/
从“./FooterStructure”导入FooterStructure
常量页脚=（）=>{
const[footerLinks，error]=useApiCall（'http://www.mocky.io/v2/5d7678f93200000362297bae');
const[visible，setVisible]=useState（）；
const showContent=（）=>{
setVisible（！visible）；
}
常量组件props={
页脚链接：页脚链接，
错误：错误，
可见的，可见的，
showContent:showContent
};
返回(
)
};
导出默认页脚；

我没有承诺的玩笑测试

import { shallow, mount } from 'enzyme';
import Footer from '.';
import mock from './__mocks__/FooterLinks';
import { useApiCall } from '../../utils/useApiCall';
import { testHook } from '../../utils/TestUtils';

jest.mock('../../utils/useApiCall');

let footerData,
    wrapper;

beforeEach(() => {
    wrapper = shallow(<Footer />);

    testHook(async () => {
        useApiCall.mockImplementation(() => Promise.resolve({ data: mock }));
        useApiCall().then((resolve)=>{
            footerData = resolve;
        })
        // This promise gives the same error
        // .then(()=>{
        //     wrapper = shallow(<Footer />);
        // })
        // .catch((error)=>{
        //     console.log(error);
        // });
    });
});

describe('Footer links', () => {
    it('should have 3 links', () => {
        expect(footerData.data.length).toEqual(3);
    });
});

从'enzyme'导入{shall，mount}；
从“”导入页脚；
从“/”mock\uuuu/FooterLinks”导入模拟；
从“../../utils/useApiCall”导入{useApiCall}；
从“../../utils/TestUtils”导入{testHook}；
jest.mock（'../../utils/useApiCall'）；
让我们看看数据，
包装纸；
在每个之前（（）=>{
包装器=浅（）；
testHook（异步（）=>{
useApiCall.mockImplementation（（）=>Promise.resolve（{data:mock}））；
useApiCall（）。然后（（解析）=>{
footerData=解析；
})
//这个承诺也有同样的错误
//.然后（（）=>{
//包装器=浅（）；
// })
//.catch（（错误）=>{
//console.log（错误）；
// });
});
});
描述（'页脚链接'，（）=>{
它（'应该有3个链接'，（）=>{
expect（footerData.data.length）.toEqual（3）；
});
});

错误

  Footer links
    ✕ should have 3 links (46ms)

  ● Footer links › should have 3 links

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

       8 | import FooterStructure from './FooterStructure'
       9 | 
    > 10 | const Footer = () => {
         |                      ^
      11 |     const [footerLinks, error] = useApiCall('http://www.mocky.io/v2/5d7678f93200000362297bae');
      12 |     const [visible, setVisible] = useState();
      13 | 

      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 Footer (src/global/Footer/index.js:10:22)
      at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:794: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 render (node_modules/enzyme/src/ShallowWrapper.js:397:22)
      at shallow (node_modules/enzyme/src/shallow.js:10:10)
      at Object.<anonymous>.beforeEach (src/global/Footer/Footer.test.js:14:15)

  ● Footer links › should have 3 links

    TypeError: Cannot read property 'data' of undefined

      24 | describe('Footer links', () => {
      25 |     it('should have 3 links', () => {
    > 26 |         expect(footerData.data.length).toEqual(3);
         |                           ^
      27 |     });
      28 | });
      29 | 

      at Object.data (src/global/Footer/Footer.test.js:26:27)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.66s, estimated 1s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.```

My jest test with promise

页脚链接
✕ 应该有3个链接（46毫秒）
● 页脚链接›应该有3个链接
TypeError:无法读取未定义的属性“Symbol（Symbol.iterator）”
8 |从“/FooterStructure”导入FooterStructure
9 | 
>10 |常量页脚=（）=>{
|                      ^
11 | const[footerLinks，error]=useApiCall（'http://www.mocky.io/v2/5d7678f93200000362297bae');
12 | const[visible，setVisible]=useState（）；
13 | 
at_iterableToArrayLimit（node_modules/babel preet react app/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js:8:22）
在_slicedToArray（node_modules/babel预置react app/node_modules/@babel/runtime/helpers/slicedToArray.js:8:33）
页脚处（src/global/Footer/index.js:10:22）
在reactshallwrender.render（node_modules/react test renderer/cjs/react test renderer shall.development.js:794:32）
渲染时（node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:636:55）
在fn（node_modules/enzyme adapter utils/src/utils.js:99:18）
在Object.render（node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:636:20）
在新渲染时（node_modules/enzyme/src/shallowRapper.js:397:22）
浅层（node_modules/enzyme/src/shallow.js:10:10）
at Object..beforeach（src/global/Footer/Footer.test.js:14:15）
● 页脚链接›应该有3个链接
TypeError:无法读取未定义的属性“data”
24 |描述（'页脚链接'，（）=>{
25 |它（'应该有3个链接'，（）=>{
>26 | expect（footerData.data.length）.toEqual（3）；
|                           ^
27 |     });
28 | });
29 | 
在Object.data（src/global/Footer/Footer.test.js:26:27）
测试套件：1个失败，共1个
测试：1次失败，共1次
快照：共0个
时间：0.66s，估计1s
运行与更改的文件相关的所有测试套件。
手表用法：按w键可显示更多信息```
我的玩笑和承诺

将问题限制在一个问题上，而不是一堆一堆地发布，你更有可能得到答案。这是一个问题？问题是我在尝试对自定义钩子使用shallow in jest时遇到此错误。我有一个类似的情况，我的自定义钩子没有引用它正在使用的上下文，并给我“arr[Symbol.iterator]不是一个看似不相关的行中的函数。通过在上下文中包装它来解决。我建议扔掉一个

调试器；

并逐步执行：