测试按钮组件
构建可共享组件时，测试至关重要。如果用户无法信任你的组件，他们很可能不会使用它。我一直在开发一个用 React 构建的演示电商项目，并在许多会议上做过相关演讲，我一直强调：
你应该编写测试。测试很重要。
它应该成为开发流程的一部分。在构建组件的同时，也应该构建测试。然而，我必须坦白地说，我一直以来都没有这样做。为什么呢？因为和你们所有人一样，时间不够。测试需要时间，而且即使没有测试，演示程序也能创建出来，没人会注意到。我知道这不好。但说实话，我真的不知道该如何测试，也不知道该测试什么。所以，2022年，是时候深入研究测试，并践行我所倡导的理念了。
测试库
我正在使用 Bit 框架，以 React 组件的形式构建演示项目。我们支持Testing Library，这是一个非常棒的开源库，我很喜欢用它。我当然算不上专家，但我会分享一些我目前为止学到的东西，或许对你有所帮助。
请确保您已安装测试库。
npm install --save-dev @testing-library/react
测试不同的按钮组合
我为按钮创建了许多不同的组合，需要进行测试。组合功能让我可以查看按钮的不同状态，例如主状态、辅助状态、禁用状态等等。
导入 React、测试库和组合
在button.spec.tsx文件中，我们将导入 React 库和测试库，以及我们要测试的按钮组合。
import React from 'react'
import { render, screen } from '@testing-library/react'
import {
PrimaryButton,
SecondaryButton,
SecondaryButtonDisabled,
PrimaryButtonDisabled,
WhiteButton,
WhiteButtonDisabled,
ButtonAsLink
} from './button.composition'
创建待办测试
接下来我们就可以开始编写测试用例了。首先，我们可以创建一个测试待办事项列表，这样就能清楚地知道需要测试哪些内容，避免遗漏。我们想要测试按钮在所有不同状态下的表现，包括禁用状态以及按钮作为链接使用时的状态。
it.todo('should render a button with the class of primary')
it.todo('should render a disabled button with the class of primary')
it.todo('should render a button with the class of secondary')
it.todo('should render a disabled button with the class of secondary')
it.todo('should render a disabled button with the class of white')
it.todo('should render a disabled button with the class of secondary')
it.todo(
'should render a button as a Link, checks for href attribute and primary class'
)
注：我这里用的是“it”而不是“test”，但我认为这只是个人偏好问题，所以选择你最喜欢的就好。
渲染按钮
我们可以从第一个测试中移除待办事项，并在测试描述后添加箭头函数来渲染主按钮。
it('should render a button with the class of primary', () => {
render(<PrimaryButton />)
})
使用角色查找我们的按钮
然后我们使用该screen方法，并getByRole传入角色信息作为参数blah。这样做是为了查看有哪些角色可供我们使用。它不会找到名为“角色”的角色，blah但会告诉我们“角色”button是可用的。这虽然显而易见，但有时您可能不知道自己有哪些角色可用，所以这样做真的很有帮助。
it('should render a button with the class of primary', () => {
render(<PrimaryButton />)
const primaryButton = screen.getByRole('blah')
})
让我们改变一下blah`to`的角色button。我们传入的第二个参数是我们要测试的文本。通过将其作为正则表达式而不是字符串传入，我们可以在i要测试的单词后面添加 `\n`，这样就不用担心大小写的问题了。
it('should render a button with the class of primary', () => {
render(<PrimaryButton />)
const primaryButton = screen.getByRole('button', { name: /primary/i })
})
预计我们的按钮将具有主属性。
然后，我们希望按钮具有一个类primary。我们可以使用expect函数并传入要测试的按钮，然后再使用函数传入要测试的类，来实现这一点toHaveClass。
it('should render a button with the class of primary', () => {
render(<PrimaryButton />)
const primaryButton = screen.getByRole('button', { name: /primary/i })
expect(primaryButton).toHaveClass('primary')
})
检查你的测试是否也失败了
现在我们的测试旁边应该会显示一个绿色对勾。但当然，我们也应该确保，例如，如果我们在中学阶段通过了测试，那么我们的测试结果应该显示为失败。
如果你像我一样使用 Bit，你可以直接在用户界面中查看测试结果，或者运行以下命令查看：
bit test componentId --watch
接下来，我们可以继续测试其余的按钮组合。
测试禁用按钮
要测试按钮是否被禁用，我们可以使用该toBeDisabled函数。
it('should render a disabled button with the class of primary', () => {
render(<PrimaryButtonDisabled />)
const primaryButtonDisabled = screen.getByRole('button', {
name: /primary/i
})
expect(primaryButtonDisabled).toHaveClass('primary')
expect(primaryButtonDisabled).toBeDisabled()
})
测试按钮作为链接
我们的按钮组件可以接收一个 prop，link该 prop 会将按钮渲染成 Link 元素，也就是一个链接元素。我们可以通过检查它是否具有 `role` 属性以及是否具有 ` link` 属性<a>来验证这一点，因为如果没有 `role` 属性，按钮作为链接元素实际上不会产生什么影响。linkhrefhref
it('should render a button as a Link, checks for href attribute and primary class', () => {
render(<ButtonAsLink />)
const buttonAsLink = screen.getByRole('link', { name: /link/i })
expect(buttonAsLink).toHaveClass('primary')
expect(buttonAsLink).toHaveAttribute('href', '/')
})
好了，我们完成了。所有测试都通过了，我们可以放心地在其他组件中使用该组件，因为它会按预期工作；如果有人修改了任何内容，测试就会失败。虽然测试需要时间，但它可以为你节省大量后续时间。我们编写的测试越多，就越得心应手，也越熟练。如果我们能将测试融入到构建流程中，事情就会变得轻松许多。但一开始，要循序渐进，像我一样从小处着手。
实用链接：
文章来源：https://dev.to/debs_obrien/testing-a-button-component-2pan