Reactjs 测试 api 调用答案

【问题标题】：Reactjs Test api callReactjs 测试 api 调用
【发布时间】：2017-07-09 01:42:54
【问题描述】：

我想开发usign Reactjs，我做了一个应用程序，我调用了一个api（https://jsonplaceholder.typicode.com/users），我也为这个调用做了一个测试，我不能调用这个api。

我在 .Net 中做了一个小 WebApi 项目，这个 WebApi 有一个端点，它给我返回一个结构简单的 json：{{person:1},{person:2}}。我使用邮递员和 Visual 中的断点测试了这个端点，它工作正常。

现在我想使用 React 的测试套件（我不知道是不是测试套件，mpn 测试），来调用这个端点但是测试没有调用端点，因为视觉中的断点没有t active，不知道Reactjs测试能不能调用Apis。

这是文件：

--PersonHelpers.test.js--

import {checkPersonList} from './RobotHelpers';

test('Check person in list',() => {

    var result = false;
    result = checkPersonList();

    expect(result).toEqual(true);
});

--PersonHelpers.js--

export const checkPersonList = () => {
    var persontList = null;

    setTimeout(() => {
        fetch('http://localhost:23620/api/Values')
        .then(response => response.json())
        .then(data => {
            persontList = data;
        });
    },1000);

    console.log("list",persontList);
    if (persontList === null)
        console.log("is null")

    if((persontList != null) && (persontList.lenght > 0))
        return true;
    else
        return false;
}

【问题讨论】：

标签： javascript reactjs ecmascript-6 es6-promise reactjs-testutils

【解决方案1】：

您要在这里测试的不是您在 .NET 中开发的后端 API，而是 checkPersonList() 在接收到 API 响应时正确运行。

AFAIK，对于单元测试，您不需要直接调用 API，而是模拟 API 请求和响应。

为此，您可以使用fetch-mock 库。

【讨论】：