如何断言应用程序使用 POST 请求向 API 服务器发送正确的数据

Posted 2023-03-04

【中文标题】如何断言应用程序使用 POST 请求向 API 服务器发送正确的数据

【英文标题】：How to assert that app sends correct data to API server with POST request

【发布时间】：2020-05-23 11:40:17

【问题描述】：

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

我是 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”？

【参考方案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,
      ,
    );
  );
);

【讨论】：

我发现在使用 axios 模拟适配器时这样做就足够了：axiosMock = new MockAdapter(REST_API); axiosMock.onPost('doSomething', user_id: 'uid1', something: 'blabla' ).reply(200);

然后expect(axiosMock.history.post.length).toEqual(1);

是的，您可以使用它，但是使用 jest.mock 您与所使用的技术无关（例如，如果有一次您决定使用与 axios 不同的东西）

【参考方案2】：

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

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

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

【讨论】：

好主意。但问题是关于如何编写测试:-)

我几乎只有红色“我怎样才能确保我（或其他一些开发人员）没有打错字并且没有在有效负载中输入“userId”而不是“user_id”要求？”它回答了它：D