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

Question

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

当我写测试时，这些痛点：

1. 我需要为每个html标签添加id，仅用于capabara到选择器项目。您知道，使用vue.js，我们不需要任何标签ID或类来进行项目选择。

2. 如何对js功能进行单元测试？我只是使用功能测试，但是当项目增长时，测试编写变得越来越难。

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

Answer 1

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

Answer 2

请记住，水豚支持许多不同的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",
},