React的测试 - Form表单测试

前言

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

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

所以，测试对于软件工程来说是非常重要的，本文讲讲表单中的测试

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

---

一、example

1.1 测试的组件

我们需要测试一个表单，用户输入username以及password就可以点击提交，需要测试点击submit后提交的内容与用户输入的一致

1.2 render组件

首先需要render测试的组件

render(<Login onSubmit={handleSubmit}/>)

可以看出来，测试的组件是需要传递handleSubmit函数的，不妨定义出来

let submittedData = {}
const handleSubmit = data => (submittedData = data)

提示 😀 可以通过screen.debug()把页面的html打印出来

1.3 获取组件

也就是获取username以及password的输入框，submit button

let username = screen.getByLabelText(/username/i)
let password = screen.getByLabelText(/password/i)
let submit =  screen.getByRole('button', { name: /submit/i })

1.4 模拟用户事件

1. 输入username以及password
2. 点击submit

userEvent.type(username, 'username')
userEvent.type(password, 'password')
userEvent.click(submit)

1.5 做对比

就是submit之后的data是否符合我们的预期，也就是测试submittedData中的数据

 expect(submittedData).toEqual({
   "username": "username",
   "password": "password"
 })

---

二、mock function

在测试用，很多时候需要模拟function，jest其实提供了一个很好地API，那就是jest.fn()，以上的测试可以修改如下

const handleSubmit = jest.fn()
render(<Login onSubmit={handleSubmit}/>)
//获取组件
//模拟用户事件
expect(handleSubmit).toHaveBeenCalledWith({
  username,
  password
})

---

三、generate测试数据

上面的测试数据，username和password都是手动输入的，更好的方法是自动生成这些数据，这里可以使用faker

username: faker.internet.userName(),
password: faker.internet.password(),

同时可以用buildLoginForm函数把数据包裹起来共外部使用，并allow user重写

function buildLoginForm(overrides) {
  return {
    username: faker.internet.userName(),
    password: faker.internet.password(),
    ...overrides,
  }
}

---

总结

文本介绍了form表单的测试，分为三步render react组件到DOM，获取组件，触发事件，通过jest.fn()可以模拟函数，通过faker.internet.username可以模拟数据