0

我正在编写与 API 服务器对话的 React.js 应用程序。我已经阅读了大量关于如何模拟这些调用并从 API 发送一些虚假响应的文章。我可以使用@testing-library/react 进行测试，我可以轻松地使用 axios-mock-adapter 模拟 axios 并使用 HTTP GET 方法测试获取请求。但是我找不到任何地方如何确保我的应用程序在发送一些 POST 请求时向 API 发送正确的数据，即我的应用程序发送带有例如“id”字段或“name”字段设置为“abc”的 json 有效负载，或类似的东西。

我是 React.js 的新手。请告知如何使测试断言应用程序发送到 API 的内容。是否可以？

假设我有一个名为 doSomething 的函数，如下所示，通过某个按钮的 onClick 调用。

const doSomething = async (userId, something) => {
    try {
        await REST_API.post('doSomething', {
            user_id: userId,
            something: something
        });
        return true;
    } catch (error) {
        window.alert(error);
        return false;
    }
};

上面的 REST_API 是 axios 实例。

如何确保我（或其他一些开发人员）没有打错字，也没有在请求的有效负载中放入“userId”而不是“user_id”？

4

2 回答 2

2

如果您必须确保正确调用 api，我会使用 jest 如下：

jest.mock('axios', () => ({
  post: jest.fn(),
}));

describe('test', () => {
  it('doSomething', () => {
    const userId = 123;
    const something = 'abc';
    doSomething(userId, something);
    expect(axios.post).toBeCalledWith(
      'doSomething', {
        user_id: userId,
        something,
      },
    );
  });
});

或者如果您使用实例，请在另一个文件 ( axios_instance.js ) 中定义它并使用以下测试：

jest.mock('./axios_instance', () => ({
  instance: {
    post: jest.fn(),
  },
}));

describe('test', () => {
  it('doSomething', () => {
    const userId = 123;
    const something = 'abc';
    doSomethingInstance(userId, something);
    expect(instance.post).toBeCalledWith(
      'doSomething', {
        user_id: userId,
        something,
      },
    );
  });
});
于 2020-02-10T15:17:01.067 回答
0

为了您的需要，我会使用 Swagger 及其工具。你会用一块石头杀死三只鸟：

这样你就有了一个坚如磐石的前端 + 后端 + 文档组合..

于 2020-02-13T09:15:19.387 回答