【Angular】使用msw轻松进行API模拟

1 年 ago

清, 扬

1 minute

简而言之。

使用MSW后，能够很容易地生成API模拟。

版本

% msw --version                                                                                                                                                               
0.39.2

我正在确认 Angular 版本是 11.2.8。

安裝

% yarn add -D msw

安装

执行初始化命令，生成mockServiceWorker.js文件在src目录下。

% npx msw init src

接下来，我们将修改angular.json文件。

{
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets",
        "src/mockServiceWorker.js" // 追加
      ],
    }
  }
}

其他的工作是将模拟处理写入到browser.ts文件中。

import { setupWorker, rest } from 'msw'

export const mocks = [
  rest.get('https://hoge.com/users/:user', (req, res, ctx) => {
    const { user } = req.params

    return res(
      ctx.status(200),
      ctx.json({
        name: `mocked-${user}`,
      }),
    )
  }),
]

const worker = setupWorker(...mocks)
worker.start()

export { worker, rest }

在环境.ts中进行导入，以便仅在开发环境中进行模拟。

import '../mocks/browser'

export const environment = {
  production: false,
}

确定行动

如果在启动Angular后，在控制台日志中看到[MSW] Mocking enabled (fallback mode)的提示，则表示worker已经成功启动。

我们只需要确认一下API能否进行模拟测试。

故障排除

警告：捕获到一个没有匹配请求处理程序的请求。

默认设置下，对于未经模拟的API请求，会在控制台上显示警告信息。
如果想要隐藏这些警告信息，可以将onUnhandledRequest的设置值更改为bypass。

worker.start({
  onUnhandledRequest: 'bypass',
})

感受到的东西/所感受到的

由于msw在Service Worker中进行模拟，所以它的主要优点是可以在几乎与生产环境相同的情况下进行应用程序测试。另外，与使用json-server时不同，不需要启动额外的进程，因此更易于管理。

请参考

Mock Service WorkerでAPIをモックして開発をスムーズに進められた話