React的测试 - context组件的测试

前言

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

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

所以，测试对于软件工程来说是非常重要的，本文主要解决context全局组件的测试

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

---

一、background

1.1问题

对于全局组件，其实每一个子组件都应该被该组件包裹，如果每次都用context.provider包裹测试组件，将会比较冗余，我们需要一个render方法已发，这个render已经把context的组件包裹进去的

1.2 API

不妨把render的API设计如下，假设context是控制theme的，初始值是light，正常不改动theme，render的方法前面不变，但是如果需要改动theme，只需要在render第二个参数也就是option中传入即可

render(<EasyButton>Easy</EasyButton>)
render(<EasyButton>Easy</EasyButton>, {theme: 'dark'})

---

二、实现

2.1 重写render

在@testing-library/react中import的render是没有包裹context的，所以不妨重写一下render如下

// test-util.js
import * as React from 'react'
import {render as rtlRender} from '@testing-library/react'
import {ThemeProvider} from 'components/theme'

function render(ui, {theme = 'light', ...options} = {}) {
  const Wrapper = ({children}) => (
    <ThemeProvider initialTheme={theme}>{children}</ThemeProvider>
  )
  return rtlRender(ui, {wrapper: Wrapper, ...options})
}

export * from '@testing-library/react'
export {render}

这样，只有test从test-util.js中import，render就包裹了所需要的Context了

---

总结

本文介绍了重写rendere方法实现包裹Context，这样让子组件还能够还能调用render方法且不需要每次用Context包裹