BDD на JavaScript: 编写业务人员能理解的测试

如何向开发者解释 Bug 不是“它不工作”？

你是否曾经收到过这样的任务：“让按钮正常工作”？或者更糟的是，你写了代码，测试通过了，但客户却说：“嗯，这不是我要求的。”听起来很耳熟？欢迎来到BDD（行为驱动开发）在JavaScript中成为救星的世界。

BDD不仅仅是另一个时髦的缩写。它是一种迫使开发者、测试人员和业务分析师说同一种语言的方法。用简单、生动的语言，而不是“方法论”和“架构范式”。今天我们将分解如何在JavaScript项目中实现BDD，编写真正的测试，并理解为什么它能让代码更清晰、生活更轻松。

什么是BDD，它与TDD有何不同？

让我们先把一件事说清楚。BDD（行为驱动开发）是TDD（测试驱动开发）的演进。如果说TDD强调的是：“先写测试，再写代码，”那么BDD补充道：“但测试必须让投资者的祖母也能理解。”

BDD的关键思想：我们测试系统的行为，而不是其内部结构。我们不问：“函数是否返回true？”我们问：“用户能否将商品添加到购物车并看到订单总价？”区别是巨大的。

对于JavaScript中的BDD，有一种特殊的语言——Gherkin。它是一种伪英语（或伪俄语），看起来像乐高积木的说明书：

Feature: Shopping Cart\n  As a registered user\n  I want to add items to the cart\n  So that I can see the total cost\n\n  Scenario: Adding one item\n    Given the user is logged in\n    When they add the item "Laptop" to the cart\n    Then the cart displays 1 item\n    And the total cost equals 99900 rubles\n

同意，这读起来像业务需求，而不是代码。而这正是BDD的主要特点。

JavaScript中的BDD工具

要在JavaScript中进行行为驱动开发，你需要合适的工具。以下是其三大支柱：

\n
• Cucumber.js——最流行的BDD框架。它解析Gherkin场景并将其链接到代码。
\n
• Jest + Jest-Cucumber——如果你已经在使用Jest，这是理想的选择。没有魔法，只有干净的集成。
\n
• Mocha + Chai + Gherkin——适合喜欢手动组装工具包的人。灵活，但代码更多。
\n

我们将使用Cucumber.js，因为它是行业标准。安装很简单：

npm install @cucumber/cucumber --save-dev\n

之后，创建一个features/文件夹——我们的.feature文件将存放在那里。而在step_definitions/文件夹中，则是实现场景的代码。

编写我们的第一个BDD测试：用户登录

假设我们正在构建一个在线商店。首先要测试的是登录。创建一个文件features/login.feature：

# language: en\nFeature: User Login\n  As a site visitor\n  I want to log into my account\n  So that I can manage my orders\n\n  Scenario: Successful login with correct credentials\n    Given I am on the login page\n    When I enter email "user@example.com" and password "123456"\n    And I click the "Login" button\n    Then I see the greeting "Welcome, Ivan!"\n

现在我们需要编写步骤——执行这些操作的JavaScript代码。创建step_definitions/login.steps.js：

const { Given, When, Then } = require('@cucumber/cucumber');\nconst { expect } = require('chai');\n\n// Application state (simulation)\nlet currentPage = '';\nlet userEmail =