在前端开发中，测试是非常重要的一环。其中单元测试就是其中的一种，而 Jest 是一个非常流行的前端测试框架。当我们需要测试一个 React 组件时，它通常有一个或多个样式类，我们需要添加样式类并测试组件的渲染结果。本文将介绍 Jest 如何匹配组件样式，详细说明如何编写样式测试代码，帮助读者全面掌握测试技巧。
匹配一个 DOM 元素的样式
在 Jest 中，我们通常使用 jest-dom 库来测试 DOM 元素的属性和样式。这个库提供了一个非常方便的 API：toHaveClass。接下来用一个示例展示如何使用这个 API。
假如我们有一个组件：
import React from "react";
import "./button.css";
export default function Button({ text }) {
return <button className="my-button">{text}</button>;
}我们需要测试这个组件，已经有以下测试用例：
it("renders a button element", () => {
const { getByText } = render(<Button text="Click me" />);
const buttonElement = getByText("Click me");
expect(buttonElement).toBeInTheDocument();
});现在我们需要测试这个按钮是否有一个叫做 my-button 的样式类，这样我们可以测试按钮的自定义样式是否被正确应用。我们可以使用 toHaveClass：
it("renders a button with a custom styling class", () => {
const { getByText } = render(<Button text="Click me" />);
const buttonElement = getByText("Click me");
expect(buttonElement).toHaveClass("my-button");
});这个测试用例会检查 buttonElement 是否有 my-button 样式类，如果没有，就会抛出错误。如果组件有多个自定义样式类，我们只需要传入多个参数即可。
匹配一个组件的样式
如果组件的样式不仅仅是应用到根元素上的一个或多个类，而是使用了 CSS 模块或者 CSS in JS 这样的方案，我们需要另外一种方法来测试样式是否被正确应用。我们可以使用 styled-components-test-utils 库来测试这样的组件，并且它不仅仅用于测试 styled-components 这样的库，它也可以用于测试其他类似的库。
假如我们有一个使用了 CSS 模块的组件 MyButton：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------------
------ ------- -------- ---------- ---- -- -
------ -
------- ----------------------------
-------------------
---------
--
-我们想要测试这个组件的样式是否被正确应用。接下来的测试用例将展示如何使用 styled-components-test-utils 库来测试这个场景。
首先，我们需要在测试文件中导入 styled-components-test-utils，然后使用 createMatchers 方法来创建匹配器集合。这个函数需要一个参数，是你的 CSS 文件的引入方法。这里我们使用了 css-modules-require-hook 这个库。
import { createMatchers } from "styled-components-test-utils";
import css from "css-modules-require-hook";
const matchers = createMatchers({ css });然后在测试用例中，我们需要使用 toHaveStyleRule 来测试样式是否被正确应用。这个 API 用于测试一个样式规则是否应用到了一个给定的组件中。下面是我们测试用例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ -------- ---- ------------------ ------ - -------------- - ---- ------------------------------- ------ --- ---- --------------------------- ----- -------- - ---------------- --- --- ----------- ---- --- ------- -------- -- -- - ----- - --------- - - ---------------- ------------- ---- ----- ------------- - -------------------- ---------------------------------------------- -------- --------------------------------------------------------- ----------- ---
这个测试用例就会检查 buttonElement 是否有 color: #fff 和 background-color: #007bff 这两个样式规则，如果没有其中之一，就会抛出错误。
这个测试用例中我们使用了 css-modules-require-hook 这个库，用于将 CSS 模块编译成一个对象，styled-components-test-utils 库使用这个对象来测试组件的样式。
总结
Jest 是一个流行的前端测试框架，当我们需要测试一个 React 组件的样式时，我们需要正确地设置测试环境，并使用合适的库来测试组件的样式。本文介绍了两种测试组件样式的方法。第一种方法是 jest-dom 库的 toHaveClass API，适用于测试一个 DOM 元素的样式。第二种方法是 styled-components-test-utils 库，用于测试使用了 CSS 模块或者 CSS in JS 这样方案的组件。希望本文能够帮助读者掌握前端测试技巧，进一步提高开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d36d15b5eee0b525b0c806