在前端开发过程中，测试是一个非常重要的环节。Cypress 是一个功能强大的端到端测试框架，它可以模拟用户行为，并且在浏览器中运行测试。它可以用于测试 Web 应用程序的所有方面，包括 DOM 操作、AJAX 请求等等。然而，Cypress 自带的断言库虽然可以解决基本的需求，但是对于一些定制化的需求可能不够满足，这时候我们可以考虑使用 Chai 断言库来补充。
Chai 是一个非常流行的 JavaScript 断言库，它支持多种测试风格，并且具有非常良好的可扩展性，因此我们可以轻松地将其集成到 Cypress 中。如果您还没有安装 Cypress 和 Chai，请先执行以下命令：
npm install --save-dev cypress chai
集成 Chai 到 Cypress
首先，在 cypress/support/index.js 文件中引入 Chai 库：
const chai = require('chai')
这里我们使用了 CommonJS 的方式来引入 Chai 库。接下来，我们可以按照自己的需求自由选择要使用的 Chai 风格。例如，如果您想使用 expect 风格，可以将以下代码添加到 cypress/support/index.js 文件中：
const { expect } = chai
与此类似，如果您想使用 should 风格，可以将以下代码添加到 cypress/support/index.js 文件中：
chai.should()
当然，您也可以同时使用多种风格，只需要根据需求引入即可。
使用 Chai 风格编写测试
在完成 Chai 配置后，您就可以使用 Chai 风格编写测试了。以下是一个示例测试：
-- -------------------- ---- ------- ------------------ ---------- - ------------ ---------- - ------------- -------------------------------- -------------- -- -------------- ---------- - ------------------ -------------------------------- ---------------------------------- ------------------------------- --------------------- ---------------------------------- -- ------------ ---------- - ------------------ ------------------------------------ ------------------------------------------ --- -------------------------------------------- ----- -- ----------- ---------- - ------------------------ ----------------------------------- ---------------------------------- ------------------------------------- --------------------- ------------------------------ ------------------------------------------- ---------- -- --展开代码
上述测试使用了 should 风格的断言。每个测试都包括一些步骤，例如访问应用程序、输入用户名和密码、查看用户列表、创建新用户等等。每个测试都应该具有可读性和可重复性，因此在每个测试结束时都要清理状态，以确保所有测试的独立性。
在测试中使用自定义断言
如果您想使用自定义断言来满足特定的测试需求，Chai 具有良好的可扩展性。以下是一个示例自定义断言：
chai.use(function(chai, utils) { chai.Assertion.addMethod('visible', function() { const subject = utils.flag(this, 'object') new chai.Assertion(subject).to.be.exist new chai.Assertion(subject).to.have.css('display', 'block') new chai.Assertion(subject).to.have.css('visibility', 'visible') }) })
该自定义断言用于验证一个元素是否可见。要在测试中使用此断言，只需将以下代码添加到测试中：
cy.get('#element').should('be.visible')
可以看到，在测试中使用自定义断言非常简单。通过这种方式，我们可以轻松地扩展 Cypress 的能力，并且可以根据自己的需求编写完全具有定制性的测试。
总结
Chai 提供了非常灵活的断言库，并且可以与 Cypress 等测试框架无缝集成。通过使用 Chai，我们可以编写定制化的测试，并且可以轻松地满足特定的测试需求。在编写测试时，我们应该保证测试具有可读性和可重复性，并且应该尽可能地减少测试的耦合性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6478af2b968c7c53b04db607
