使用来自外部资源的模拟数据测试反应应用程序

【问题标题】：Testing react app with mock data from external resource使用来自外部资源的模拟数据测试反应应用程序
【发布时间】：2020-12-03 12:32:52
【问题描述】：

我一直在使用 jest、enzyme 和 moxios 来测试我的 react 应用程序。 API 响应作为模拟存储在应用程序本身中。很难维护这些模拟，因为当修改 api 响应时，我必须手动更新模拟并进行必要的更改。还有其他使用相同 api 并在其存储库中具有模拟的反应应用程序。将模拟存储在 s3 等外部资源中以便多个应用程序访问它的正确方法是什么？

【问题讨论】：

标签： reactjs unit-testing testing jestjs

【解决方案1】：

我的目标是在运行测试时从模拟服务器加载模拟数据，而不是使用硬编码的模拟数据。我使用msw 实现了这一点。它允许我们拦截 http 请求并返回模拟数据。在这里，我没有返回模拟数据，而是进行了 fetch 调用以从服务器获取模拟数据并将其作为模拟响应返回。

代码：

import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.post('/photos', (req, res, ctx) => {
    return fetch('https://jsonplaceholder.typicode.com/photos?_limit=1')
      .then(result => result.json())
      .then(result => {
        return res(
          ctx.json(result)
        )
      })
  }),
)

【讨论】：