首页 > 解决方案 > 使用 Jest/Enzyme 测试 Axios Post Insert/Update

问题描述

我开始学习使用 Enzyme/Jest 进行 React 测试。我想使用的一些测试是查看是否在数据库中插入/更新了某些内容。我想知道如何用axios. 我听说过axios-mock-adapter并且可能会使用它。有没有一种方法可以模拟数据库插入/更新调用,而无需在实际数据库中实际插入/更新条目?

例如:我有一个向 api 端点发出 post 请求的方法,该端点将新条目插入到我的数据库中的表中。有没有办法用 Jest/Enzyme 来测试这个

  1. 数据库没有被修改

  2. 如果要使用实际数据库执行,我可以以某种方式得到一个响应,告诉我 api 调用是成功的。

我不确定这是否应该在反应上进行测试,或者是否最好在数据库的后端完成。

我对此仍然很陌生,所以任何帮助/提示将不胜感激!

谢谢!

标签: databasereactjsunit-testingjestjsenzyme

解决方案


我建议在后端进行测试。

运行测试时,一个好的做法是使用可用于测试的本地数据库在本地运行您的应用程序。您不想使用已部署的应用程序并向其发送 axios 请求,就像您所说的那样,更新实际的数据库。此外,Jest 喜欢以它想要的任何顺序运行测试,因此当您不知道哪些数据已经插入到数据库中时,很难期待某些数据返回。

使用设置和拆卸方法。每个测试套件通常都应该设置您的服务器,并在最后“拆除”它。按每个路线/模型分隔您的测试套件。这是一个好主意,因为当您要模拟数据或测试插入路由时,您不希望它影响其他测试。因此,在每次测试之后,您还可以截断您模拟/插入的所有数据。

例子:

test('GET /cats get all cats', () => {
   // Mock 100 of cats
   // Send axios request for all cats
   // Assert 100 cats returned.
});

test('POST /cats insert a cat and then get all should be 1', () => {
   // Send axios request inserting 1 cat with data
   // Send axios request to get that 1 cat.
   // Assert returned cat matches data sent.
});

如果上述测试按顺序完成,您将无后顾之忧。但是由于如果切换测试没有特定的顺序,您的顶级测试将失败,因为它将返回 101 只猫。为防止这种情况发生,您需要设置和拆卸...

开玩笑的例子:

beforeAll(//Start server);
afterAll(//Stop server);
afterEach(//Truncate cats);

test('GET /cats get all cats', () => {
   // Mock 100 of cats
   // Send axios request for all cats
   // Assert 100 cats returned.
});

test('POST /cats insert a cat and then get all should be 1', () => {
   // Send axios request inserting 1 cat with data
   // Send axios request to get that 1 cat.
   // Assert returned cat matches data sent.
});

推荐阅读