javascript - Reactjs 测试 api 调用

Question

我想开发使用Reactjs，我做了一个应用程序，在其中调用了一个api( https://jsonplaceholder.typicode.com/users )，并且我对此调用进行了测试，但无法调用此api。

我在 .Net 中创建了一个小型 WebApi 项目，该 WebApi 有一个端点，它返回一个具有以下简单结构的 json:{{person:1},{person:2}}。我使用 postman 和 Visual 中的断点测试了此端点，它起作用了。

现在我想使用React的测试套件(我不知道它是不是一个测试套件，mpn test)来调用这个端点，但是测试没有调用该端点，因为视觉中的断点没有调用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;
}

Answer 1

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

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

为此，您可以使用 fetch-mock图书馆。