如何使用 rspec 测试前端功能？

Question

我在 rails 项目中使用 vue.js，但只是核心库。 现在，项目中的大多数表单都是用 vue.js 开发的。我在 rspec 中使用功能测试来测试前端功能，例如填充或表单验证，但发现它很难。

这些是我写测试的痛点：

1. 我需要为每个 html 标签添加 id，只是为了让 capabara 到选择器项。你知道，使用 vue.js，我们不需要任何标签 id 或类来选择项目。

2. 如何对 js 功能进行单元测试？我只是只使用特性测试，但是随着项目的发展，测试编写变得越来越难。

有没有更简单的方法或最佳实践？

Answer 1

请记住，Capybara 支持许多不同的selectors，您可以使用它们来定位元素，而无需始终添加 CSS 类或 ID。

在 Vue 中创建自己的组件时，更好的选择是始终在链接和按钮元素上呈现 data-qa 或 name 属性（不一定是标签，但可以默认为它），然后configure Capybara to use that 查找您的元素。

Capybara.configure do |config|
  config.test_id = 'data-qa'
end

click_link('cart.checkout')

对于 JS 单元测试，您可以尝试使用 Jest 或 Mocha-Webpack。例如，假设您有一个使用vue-cli 的配置：

"scripts": {
  "test:mocha": "vue-cli-service test:unit --watch",
},

Answer 2

你可以用茉莉花。它非常流行并且接近 Rspec 语法。 无论如何，有很多工具可以做到这一点：JavaScript unit test tools for TDD