` 標籤包覆起來。
> 因為預設採用 TypeScript 的關係，別忘記將 `app/javascript/entrypoints/application.js` 的副檔名替換為 `.ts`
## 用 Cucumber 驗證環境{#verify-environment-with-cucumber}
最後，我們要驗證我們可以用 Cucumber 來對前端做測試，加入 `features/products.feature` 和以下內容，先用於確認 Vue 正確的被載入。
```gherkin
#language:zh-TW
@javascript
功能: 商品列表
場景: 當開啟網站時，可以看到 Hello, ViteRuby
當 開啟網站
那麼 可以看見 "Hello, ViteRuby"
```
這裡會發現我們額外加入了 `@javascript` 的標籤，這會讓 Cucumber 意識到需要呼叫 Capybara 使用真實的瀏覽器運行去模擬，關於對應的設定可以參考樣板中 `features/support/env.rb` 的內容，以及 [cucumber-rails](https://github.com/cucumber/cucumber-rails) 的文件。
接著加入 `feature/step_definitions/common.rb` 來定義步驟，雖然我們可以沿用 `.feature` 文件，然而在不同語言跟環境中，會需要用對應的語言重新實作步驟定義。
```ruby
# frozen_string_literal: true
When('開啟網站') do
visit root_path
end
Then('可以看見 {string}') do |text|
expect(page).to have_text(text)
end
```
這邊使用 Capybara 的匹配器（Matcher）來檢查畫面上有出現的文字。
接下來我們修改 `app/javascript/entrypoints/application.ts` 的內容從預設的樣板，改為初始化 Vue 的實作。
```ts
import { createApp } from 'vue'
import App from '@/App.vue'
const app = createApp(App)
app.mount('#app')
```
再將 `app/javascript/App.vue` 補到專案裡面，寫上 `Hello, ViteRuby` 來配合我們的第一個測試。
```vue
Hello, ViteRuby
```
最後補上一個空的 Controller 和 View 讓我們可以將畫面渲染出來。
```ruby
Rails.application.routes.draw do
root 'stores#index'
end
```
```ruby
# app/controllers/stores_controller.rb
class StoresController < ApplicationController
end
```
```bash
mkdir -p app/views/stores
touch app/views/stores/index.html.erb
```
接下來運行 `bundle exec cucumber` 確認是否能正常通過測試，如果遇到 JavaScript 檔案不存在的話，可以運行 `./bin/dev` 或者 `bundle exec rake assets:precompile` 來生成，在 Rails 專案樣板中預設使用 Chrome Headless 模式，如果是自己安裝 Cucumber 的話要可以看到跳出瀏覽器開啟畫面的樣子。
接下來，就要把前端的實作轉移到 Rails 上來重現相同的功能。