前言
chai-style 是一款基于 Chai.js 的 npm 包，用于为 JavaScript 单元测试增加针对样式的断言。本篇文章将为大家详细介绍如何使用 chai-style。
安装和引用
安装 chai-style：
npm install chai-style --save-dev
在测试文件中引入 chai-style：
const chai = require('chai');
const chaiStyle = require('chai-style');
chai.use(chaiStyle);使用方法
chai-style 提供了3种不同的方式来对样式进行断言。
with
使用 with 可以声明一些 CSS 样式，然后针对指定元素进行判断是否符合这些样式，使用方法如下：
expect(element).to.have.style('color', 'red').and.with.css({ 'font-size': '14px', 'line-height': '16px' });in
使用 in 可以声明一些 CSS 样式，然后针对指定元素的子元素进行判断是否符合这些样式，使用方法如下：
expect(element).to.have.style('color', 'red').and.in.css({ 'font-size': '14px', 'line-height': '16px' });inside
使用 inside 可以声明一个在某个 DOM 元素内部的元素，然后针对这个元素进行样式断言，使用方法如下：
expect(element).to.have.an.element('div').inside.and.with.style('color', 'red');完整示例
以下是一个包含了上述3种方式的完整示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ----------------------
--------------------
---------------------- -- -- -
--- --------
------------- -- -
------- - -------------------------------
----------------- - ----------
----------------- - -------------
-----------------------------------
---
------------ -- -
-----------------
---
---------- ----- --- ----- -- -- ------- ----------- -- -- -
-------------------------------------- --------------------- ------------ ------ ---
---
---------- ----- --- ----- -- - ----- ------- ----------- -- -- -
----- ------------ - ------------------------------
--------------------------- - -------
---------------------- - --------
----------------------------------
-------------------------------------- ------------------- ------------ ------ ---
---
---------- ----- --- ----- -- -- ------- ------ - ------ ------- ----------- -- -- -
----- ------------- - ------------------------------
----- ------------ - ------------------------------
------------------------ - ------
----------------------------------------
-----------------------------------------
------------------------------------------------------------------------------ -------
---
---总结
使用 chai-style 能够为我们的 JavaScript 单元测试增加针对样式的断言，可以更好的保证我们的页面在各种条件下都能够正常运行。通过本文，我们已经了解了如何安装、引用和使用 chai-style。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671381e8991b448e3635