railsのdeleteリクエストについて納得できない

Question

RoRにてポートフォリオを作成中。

Rails 5.2.4.4
ruby 2.6.3

ログアウト機能を実装し、テストコードを書いている際に、なぜかログアウトした際のテストが通らないことが判明。
サーバーを立ち上げ、同じ動作をした結果、本来deleteリクエストとなるはずがgetリクエストとなっており、route errorとして判断されていた。

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
  <%= link_to(image_tag("header_logo.jpg", :alt => ""), root_url, id: 'logo') %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",   '/' %></li>
        <li><%= link_to "About",  '/about' %></li>
        <% if logged_in? %>
          <li><%= link_to "Users", '#' %></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Account <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><%= link_to "Profile", current_user %></li>
              <li><%= link_to "Settings", '#' %></li>
              <li class="divider"></li>
              <li>
                <%= link_to "Log out", logout_path, method: :delete %>
                ↑該当箇所
              </li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Log in", login_path %></li>
        <% end %>
      </ul>
    </nav>
  </div>
</header>

本来,deleteリクエストは存在せず、jsでdeleteを実装している？
（ここの知識が曖昧です。すいません）
ことから、下記の通りにapplication.jsを修正した。

//= require jquery
//= require jquery3
//= require jquery_ujs
//= require popper
//= require bootstrap-sprockets

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

が結果は、getとして判断された。

qiitaやネットの記事からlink_toをbutton_toにすると動作するとのこと

<%= link_to "Log out", logout_path, method: :delete %>
↓
<%= button_to "Log out", logout_path, method: :delete %>

結果はdeleteリクエストとして動作し、rspecもlinkからbuttonに修正したところ通るようになりました。

しかし、buttonにしないと動作しない原因が分からず、納得できません。
望みとしてlinkで統一したいですし、他の開発者はどのように対応しているのか知りたいと思い投稿しました。
結論的には解決している問題ですが、どなたかご教示いただければ嬉しく思います。

networkタブの状況です

試しにrails-ujsを確認した結果です

回答を参考に、下記の通り修正

  #config.log_level = :warn（削除）
  #config.logger = Logger.new(STDOUT)（削除）
--------------------------------↓↓修正後↓↓
  logger           = ActiveSupport::Logger.new(STDOUT)
  logger.formatter = config.log_formatter
  config.logger = ActiveSupport::TaggedLogging.new(logger)

networkタブの状況

consoleの状況

Answer 1

本来,deleteリクエストは存在せず、jsでdeleteを実装している？

はい、本来<a>タグで生成されるリンクではGETリクエストが行われます。それをJavaScript経由で乗っ取ることでDELETEなどに変換しています。

下記の通りにapplication.jsを修正した。

jquery_ujsとrails-ujs、jqueryとjquery3など、同じ機能性を持つものを複数読み込んでしまっています。そのあたりでなにか干渉が起きていることが考えられます。

Comments

[lah]

application.jsを下記の通りに修正しました。
//= require jquery3
//= require popper
//= require bootstrap-sprockets

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

その後に、link_to及びbutton_toの両方を試しましたが、やはりlink_toではgetリクエストになってしまいます。

[maisumakun]

link_toで生成した<a>タグを、HTMLとして確認するとどのようになっていますか？

[lah]

下記の通りとなっております。
<a rel="nofollow" data-method="delete" href="/logout">Log out</a>

他の箇所では
<a href="/users/1">Profile</a>

となっており、生成されるHTMLに違いがあるようです。

[maisumakun]

きちんとdata-methodが入っている以上、問題はJavaScriptの側のようですが、ちょっと状況が把握しきれていないです。

ブラウザのJavaScriptコンソールにエラーが出ていたりはしませんか？

[lah]

46個もの数で下記のエラーが発生しております。
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

[maisumakun]

Networkタブから500になったエラーの状況を確認できますか？

[lah]

返信が遅くなってしまい申し訳ありません。
devtoolsの知識について疎いので、スクリーンショットしたものを掲載しました。
stylesheetからstatuscodeが500となっております。

[maisumakun]

500になった接続を選択して、詳細を確認してみてください。何がエラーになったかRailsが返してきている可能性があります。

（ujsの入ったJavaScriptも、500となっているようです）

[lah]

詳細結果を掲載しました。
おっしゃっていることと掲載しているものは合っているでしょうか？ご確認ください。
ちなみにいつからかbootstrapが適用されなくなっていました。
しかし、ある程度機能を実装してからフロントを修正すれば良いと思い無視していました。
何かの参考になればと思います。

[maisumakun]

同様のエラーが起きる状況について https://github.com/rails/sprockets-rails/issues/376 のような情報もあります。

[lah]

500番のエラーは消えbootstrapも適用されているように見えます。しかし、networkタブにてpendingとなり何かの処理が遅いもしくは実行されていないようです。
consoleの状況も追記しております。
修正の仕方が悪いのかもしれません。
何か他に必要なデータがございましたら、添付いたします。

[maisumakun]

えっと、ブレークポイントを外して待ったらどれくらいでロードされますか？

[maisumakun]

（ブレークポイントを仕掛けたこと自体を予想していませんでしたし、Harluzさんが何をどう変更したかも書かれていないので、事態がどう進展しているのか正確につかめていない感じです）

[lah]

devtoolsのエラー内容が変わらないことから、そのままポートフォリオ作成を続けておりました。その際に、binding.pryにて一部デバッグを試みていたところでした。
consoleを確認した際に、ブレークポイントとあったため、それを外した上で再度実行した結果を掲載させていただきました。変わらずブレークポイントとなっていたため私の検討違いと思い質問を続けさせていただきました。
一度、内容を整理した上で、再度質問をアップしたいと思います。
知識の疎い私に親切に教えていただきありがとうございます。