- Rails 7.1.2
- tailwind css
上記を用いて開発しているプロジェクトにおいて、ModelSpecは実行できるが、SystemSpec実行時にエラーが出る。
config/environments/production.rb
に以下を追記したら解決した記載があり、試したが効果なし
config.assets.css_compressor = nil
環境
Gemfile
group :development, :test do
gem "debug", platforms: %i[ mri windows ]
gem 'rspec-rails'
gem "capybara"
gem "selenium-webdriver"
gem "webdriver"
gem 'factory_bot_rails'
gem 'faker'
end
spec/rails_helper.rb
config.before(:each, type: :system) do
driven_by(:selenium_chrome_headless)
end
.rspec
--require spec_helper
--format documentation
app/views/layouts/application.html.erbのhead部分
<!DOCTYPE html>
<html>
<head>
<title>hogehoge</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<%= render 'shared/favicon' %>
<link rel="manifest" href="/manifest.json">
<%= display_meta_tags(default_meta_tags) %>
</head>
Rspec作成後、以下を実行すると、Model Specは問題なく通るが、System Spec実行時にエラーを吐く
bundle exec rspec
エラーログ(抜粋)
1) サンプルテスト項目
Failure/Error: <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
ActionView::Template::Error:
Error: Function rgb is missing argument $green.
on line 1 of stdin
>> ue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opa
------------------------------------------^
# stdin:1
# ./app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html_erb___3914676935796240984_33440'
# ------------------
# --- Caused by: ---
# SassC::SyntaxError:
# Error: Function rgb is missing argument $green.
# on line 1 of stdin
# >> ue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opa
# ------------------------------------------^
# stdin:1
対処
プリコンパイルされたファイルを一度クリアし、再度プリコンパイルを実行することで解決
# プリコンパイルされたファイルをクリア
rails assets:clobber
# 再度プリコンパイル
rails assets:precompile
Rspec側が、Tailwind CSSが生成するスタイルをうまく読み込めていないことが原因だったみたい。
参考
https://github.com/tailwindlabs/tailwindcss/discussions/6738
https://github.com/Kei5665/tokyo_senkyo_matching/issues/45
https://qiita.com/takakou/items/b1cc3dca18966ed2b9f4