前言

测试除了可以让我们对线上代码更有信心，更重要的是

当需要重构代码时，有测试用例的代码才叫重构，没有测试用例的代码叫重写

所以，测试对于软件工程来说是非常重要的，本文将模拟http的请求

如果对React测试不熟悉的话可以参考我之前的React的测试 - 基本的HTML测试

---

一、 background

1.1 mocking data

很多时候前端需要请求后端数据，mocking data做测试使用就很有必要了

1.2 API

这里使用的是MSW，其中mocking的方法如下

const server = setupServer(
  rest.post(
    'https://auth-provider.example.com/api/login',
    async (req, res, ctx) => {
      return res(ctx.json({greeting: 'hello world'}))
    }
  )
)

---

二、 example

2.1 测试组件

测试用户登录后server端的返回

2.2 后端数据

这里单独创建一个server-handler.js负责处理login的数据模拟

import {rest} from 'msw'

const delay = process.env.NODE_ENV === 'test' ? 0 : 1500

const handlers = [
  rest.post(
    'https://auth-provider.example.com/api/login',
    async (req, res, ctx) => {
      if (!req.body.password) {
        return res(
          ctx.delay(delay),
          ctx.status(400),
          ctx.json({message: 'password required'}),
        )
      }
      if (!req.body.username) {
        return res(
          ctx.delay(delay),
          ctx.status(400),
          ctx.json({message: 'username required'}),
        )
      }
      return res(ctx.delay(delay), ctx.json({username: req.body.username}))
    },
  ),
]
export {handlers}

2.3 准备server

从server-handlers中importserver并初始server

1. listen
2. close
3. resetHandlers

const server = setupServer(...handlers)

beforeAll(() => server.listen())
afterAll(() => server.close())
afterEach(() => server.resetHandlers())

2.4 测试

测试还是比较固定的，render，获取组件，模拟事件
其中，这里用到了waitForElementToBeRemoved函数，用来测loading状态的

test(`logging in displays the user's username`, async () => {
  render(<Login />)
  const {username, password} = buildLoginForm()

  userEvent.type(screen.getByLabelText(/username/i), username)
  userEvent.type(screen.getByLabelText(/password/i), password)
  userEvent.click(screen.getByRole('button', {name: /submit/i}))

  await waitForElementToBeRemoved(() => screen.getByLabelText(/loading/i))

  expect(screen.getByText(username)).toBeInTheDocument()
})

---

总结

本文讲了mocking http requests，用到了MSW，这样我们就可以通过引入rest来模拟rest api了