如何使用RSPEC测试前端功能

Question

我正在使用Rails Project中的Vue.js，但仅使用核心库。现在，该项目中的大多数形式都使用vue.js开发。我在RSPEC中使用功能测试来测试前端功能，例如填充或表格验证，但发现它很难。

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

1. 我需要为Capabara的每个HTML标签添加ID到选择器项目。您知道，使用vue.js，我们不需要任何标签ID或类来选择项目。

2. 我如何单元测试JS功能？我只使用功能测试，但是当项目增长时，测试写作变得越来越困难。

有任何更轻松的方法或最佳实践吗？

Answer 1

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

在VUE中创建自己的组件时，一个更好的选择是在链接和按钮元素上始终渲染data-qa或name属性（不一定是标签，但可以默认为其），然后配置Capybara以使用capybara来使用以使用以使用capybara找到您的元素。

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

click_link('cart.checkout')

对于单元测试JS，您可以尝试使用嘲笑或摩卡式摩卡饼。例如，假设您具有使用vue-cli的配置：

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

Answer 2

您可以使用茉莉花。它非常受欢迎，并且靠近RSPEC语法。无论如何，有很多工具要这样做：JavaScript单元测试工具TDD