如何用rspec测试前端功能？

Question

我在rails项目中使用vue.js，但只使用核心库。现在，项目中的大多数表单都是用vue.js开发的。我在rspec中使用了特性测试来测试前端特性，比如从验证中填充或形成验证，但是我发现它太难了。

这是我写测试时的一些痛点：

1. 我需要为每个html标签添加id，只为capabara添加到选择项。您知道，使用vue.js，我们不需要任何标签id或类来选择项目。
2. 如何对js特性进行单元测试？我只是使用特性测试，但是当项目增长时，测试编写变得越来越困难。

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

Answer 1

请记住，Capybara支持许多不同的选择器，您可以使用它来定位元素，而不必总是添加CSS类或id。

在Vue中创建自己的组件时，一个更好的选择是始终在链接和按钮元素上呈现一个data-qa或name属性(这不一定是标签，但可以默认为它)，然后配置Capybara以使用该来查找您的元素。

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

click_link('cart.checkout')

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

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

Answer 2

你可以用茉莉花。它非常流行，接近于Rspec语法。不管怎样，有很多工具可以做到这一点：TDD的JavaScript单元测试工具