如何断言应用程序通过 POST 请求将正确的数据发送到 API 服务器

Question

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

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

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

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" 放在有效负载中请求？

Answer 1

如果您必须确保正确调用 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,
      },
    );
  });
});

Answer 2

根据您的需要，我会使用 Swagger 及其工具。一石三鸟:

拥有适当的 API 文档：https://swagger.io/tools/swagger-ui/
保护后端：确保 inputs/outputs 有效，如果客户端发送错误数据则抛出详细异常：https://github.com/cdimascio/express-openapi-validator-example
保护前端：使用客户端 api 代来生成客户端使用的 js 类 .. 这样他们就不会随意手动创建对象并将它们发送到服务器（交叉手指）但是使用专用的 API 和设置器：https://github.com/swagger-api/swagger-codegen

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

如何断言应用程序通过 POST 请求将正确的数据发送到 API 服务器

How to assert that app sends correct data to API server with POST request

node.js

reactjs

testing

axios

axios-mock-adapter