react测试 （4） msw

Mock Service Worker（MSW）可以用于api的模拟，让前端在开发或者测试时不需要依赖后端的接口，msw不仅可以用在测试中，还可以在起的开发环境中使用

node中使用，比如在测试用例中使用

定义出我们需要的请求

//handlers.js
import { rest } from 'msw'

export const handlers = [
    //定义一个greeting的get请求
    rest.get("/greeting",(req, res, ctx)=>{
        return res(ctx.json({greeting: 'hello there'}))
    }),
    //定义一个/hello的get请求
    rest.get("/hello",(req, res, ctx)=>{
        return res(ctx.json({greeting: 'hello world'}))
    })
]

启用服务端的api模拟，一般来说我们会把这个模块引入到react项目的setupTests.js文件中（如果你是使用脚手架创建的项目的话），这样我们就可以在测试用例中使用我们模拟的请求了

//server.js
import { setupServer } from 'msw/node'
import { handlers } from './handlers'

export const server = setupServer(...handlers)

测试时开启msw

//setupTests.js
import { server } from './mocks/server'

//我们将在所以测试用例开始前将服务端msw启动监听
beforeAll(() => {
    // 开启api监听
    server.listen()
})

//每个测试之后重置处理程序
afterEach(() => {
    // 重置处理程序
    server.resetHandlers()
})

//测试结束后结束msw
afterAll(() => {
    // 关闭监听
    server.close()
})

浏览器端中使用msw

//browser.js
import { setupWorker } from 'msw'
import { handlers } from './handlers'

//创建浏览器端使用的msw
export const worker = setupWorker(...handlers)

在项目的的入口文件中开启msw的监听，然后就可以在我们的开发环境中使用msw来模拟接口了

//index.js

//这里我们仅当时开发环境时才使用msw，生产环境肯定都是调用后端提供的真实接口
if (process.env.NODE_ENV === 'development') {
    //引入browser.js并开启msw
    const { worker } = require('./mocks/browser')
    worker.start()
}