reactjs - 使用 Jest 模拟 React 的 AJAX 请求

Question

我正在构建一个 React 组件，该组件在安装时通过 AJAX 从服务器获取数据。

我正在尝试(但失败了)在 Jest 中模拟 AJAX 调用，我想知道我是否只是误解了 Jest 中模拟的真正工作原理？

我的文件结构是:

• index.js
• index.test.js
• 请求.js
• __模拟__
  • 请求.js

组件 (index.js) 通过 requests.js 进行调用，它使用 Axios 从服务器获取数据。 requests.js 在 __mocks__ 文件夹中模拟。

从下面的测试文件 index.test.js 中可以看出，我正在使用 getSpy 来检测 requests.getData 函数被调用。它从来没有。我应该补充一点，我还尝试让组件简单地呈现来自 getData 函数响应的一些数据，然后在测试文件中运行 console.log(ListWrapper .debug()); 以查看数据是否在测试中呈现。再一次，它永远不会。

只是想知道是否有人能发现我哪里出错了，或者我是否只是走错了路？

index.test.js

import React from 'react';
import { mount } from 'enzyme';
import List from './index';
import expect from 'expect';

import requests from './requests';

jest.mock('requests');

describe('Renders list', () => {
    const getSpy = jest.spyOn(requests, 'getData');

    const ListWrapper = mount(
        <ListWrapper />
    );

    console.log(ListWrapper.debug());

    it('should fetch currencies', () => {
        expect(getSpy).toBeCalled();   
    });
});

__mocks__/requests.js

module.exports = {
    getData: () => {
        return new Promise((resolve) => {
            resolve({
               [
                    {
                        id: 1,
                        name: 'Bob Smith',
                        age: 32
                    }
                ]
            });
        });

    }
};

index.js(缩写)

/**
 * List component
 */
import React, { useState, useEffect, useCallback } from 'react';
import * as requests from './requests’;
function List(props) {

  const [data, setData] = useState([]);

   /**
     * Get data from server
     */
   const getCurrencies = useCallback(() => {
      r4_uiTools.loadingAnimation.show();
      requests
          .getData()
          .then((response) => {
              setData(response);
          })
          .catch(error) {
              //...
          }

   /**
     * Get data when first mounting component
     */
    useEffect(() => {
        getData();
    }, [getData]);

  return(
   <>
    /* ... */
    {data[0].name}
   </>
  );

requests.js(缩写)

import axios from 'axios';

const getData = () => {
    return new Promise((resolve, reject) => {
        const url = `/MyURL/`;
        axios
            .get(url)
            .then((response) => {
                resolve(response);
            })
            .catch((error) => {
                reject(error);
            });
    });
};

export { getData };

Answer 1

您的 useEffect 不应该像这样吗？

useEffect(() => {
    getCurrencies();
}, []);

此外，index.test.js 中的 ListWrapper 是什么？是否打错了，应该是 List？