如何使用 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，您可以嘗試使用Jest或Mocha-Webpack 。 例如，假設您有一個使用vue-cli的配置：

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

Answer 2

你可以用茉莉花。 它非常流行並且接近 Rspec 語法。 無論如何，有很多工具可以做到這一點： 用於 TDD 的 JavaScript 單元測試工具