render注册一个链接组件_ReactHooks搭建组件库--button测试

前端组件库的测试

1.为什么需要前端组件库的测试

为了对自己写的有更少的错误，和更正确的展示。网上有许多关于测试的重要性的答案，但是感觉目前的前端还是很少会写很详尽的测试代码，抛开增加工作成本不谈，主要是不知道怎么测试前端代码。即使我想着写一篇日志记录一下如何写测试，但是对于里面测试的原理还是照猫画虎，不甚了解。

2.如何进行前端组件库的测试

本文主要记录使用 @testing-library框架和@testing-library/jest-dom断言库进行上一篇写的button组件的测试。

在react官网中推荐了两个测试的工具

• JEST
• react测试库 即 React Testing Library

测试概览 – React​react.docschina.org

作为菜鸡的我，啄不懂两者的区别在何处，但是react 测试库是react更为倡导的一个测试框架，而且在create-react-app新的版本中已经内置了。所以本文记录一下使用react测试库来测试button组件的心路历程。

在控制台输入

yarn test

的时候，会对以下三种文件进行测试:

• __test__ 文件夹下面的所有文件
• .test.js 文件
• .spec.js 文件

所以，在button.tsx文件的同级目录下，创建一个button.test.js文件

// button.test.js
import React from 'react‘
import { render, fireEvent } from '@testing-library/react‘ // 内置的 如果没有内置 可直接下载
import Button, { ButtonProps, ButtonSize, ButtonType } from './button‘

// 先写一个简单的测试用例
test('first test‘, () => {
  const wrapper = render(<Button>ck</Button>) // 将button组件渲染
  const element = wrapper.getByText('ck')     // 通过text获取元素
  expect(element).toBeInTheDocument()         // 判断元素是否渲染在文档中
})

如果测试都是这么简单就好了，本文终。

但是天不遂人愿，对组件的测试一般需要考虑不同的情况，通过button组件举栗:

1. 渲染一个默认的按钮
   1. 渲染的是否是一个按钮元素
   2. 按钮的类名是否符合期望
   3. 按钮被点击时，函数是否被调用
2. 渲染不同的属性的按钮
   1. 类名是否符合期望
3. 渲染一个链接的按钮并且有href
   1. 元素是否是一个a元素
   2. 类名是否符合期望
4. 禁用按钮
   1. 按钮的禁用属性是否存在
   2. 按钮被点击时，函数是否不会被调用

所以，要对上述所有的条件进行测试

const defaultProps = {
  onClick: jest.fn()
}
const testProps: ButtonProps = {
    btnType: ButtonType.Primary,
    size: ButtonSize.Large,
    className: 'ckbtn'
}
const disabledProps = {
    disabled: true,
    onClick: jest.fn()
}
describe('test button component‘, () => {
  it('是一个默认的按钮‘, () => {
    const wrapper = render(<Button { ...defaultProps }>ck</Button>)
    const element = wrapper.getByText('ck‘)
    // 1.1 判断是否是一个按钮元素
    expect(element.tagName).toEqual('BUTTON')
    // 1.2 判断类名是否符合期望
    expect(element).toHaveClass('btn btn-default‘)
    // 1.3 模拟一个点击事件 判断函数是否被调用
    fireEvent.click(element)
    expect(defaultProps.onClick).toHaveBeenCalled()
  })
  it('渲染不同属性的按钮‘, () => {
    const wrapper = render(<Button { ...testProps }>ck</Button>)
    const element = wrapper.queryByText('ck')
    expect(element).toHaveClass('btn-primary btn-lg ckbtn')
  })
  it('渲染一个链接并且有href', () => {
    const wrapper = render(<Button btnType={ ButtonType.Link } href='www.baidu.com'>ck</Button>)
    const element = wrapper.getByText('ck')
    expect(element).toBeInTheDocument()
    expect(element.tagName).toEqual('A')
    expect(element).toHaveClass('btn btn-link')
  })
  it('禁用属性', () => {
    const wrapper = render(<Button { ...disabledProps } >ck</Button>)
    const element = wrapper.getByText('ck') as HTMLButtonElement
    expect(element).toBeInTheDocument()
    expect(element.disabled).toBeTruthy()
    fireEvent.click(element)
    expect(disabledProps.onClick).not.toHaveBeenCalled()
  })
})

这回真的终了了，文章到此为止，但是测试远不止如此，而且前端对于测试的掌握程度，应该也不是到此就足够了，还有很多需要学习的地方。记录就到这里了～