rails tutorial 第８章 user_login_testにてNoMethodError: undefined method `document' for nil:NilClass

Question

rails tutorial 第８章でのエラーです。

現在rails tutorial第７8のsessionsのlogin統合テストを
vueとrailsのAPIモードを使って作成しています。

ログインフォームをvueにて作成し、railsにてアクセスした際のviewのテストを行っています。
テストは以下の通りです。

class UsersLoginTest < ActionDispatch::IntegrationTest
  test "login with invalid infomation" do
    get 'http://localhost:8080/login'
    assert_select "div"
  end
end

ログインフォームは以下の通りです。

<template>
    <v-row class="text-center">

      <!-- title -->
      <v-col cols="12" class="text-h3 mt-5">
          Login
      </v-col>

      <!-- error_message -->
      <v-alert type="success" :value="state" dense outlined transition="fade-transition" width="30%" class="alert">'Invalid email/password combination'</v-alert>

      <!-- form -->
      <v-col cols="12">
        <v-form>
          <v-container>
            <v-row>
              <v-col cols=12>
                <v-text-field
                  v-model="sessions.email"
                  label="email"
                  required
                  outlined
                  class="mb-2"
                ></v-text-field>
                <v-text-field
                  v-model="sessions.password"
                  label="password"
                  required
                  outlined
                  class="mb-2"
                ></v-text-field>
              </v-col>
            </v-row>
          </v-container>
        </v-form>
      </v-col>

      <!-- button -->
      <v-col>
        <v-btn @click.prevent="login">Login</v-btn>
      </v-col>


    </v-row>
</template>

<script>
  import axios from 'axios';
  export default {
    data () {
      return {
        sessions: {
          email: '',
          password: '',
        },
        errors: '',
        state: false,
      }
    },
    methods: {
      login: function() {
        this.errors = '';
      axios
      .post('http://127.0.0.1:3000/login', this.sessions)
      .then(() => {
        this.$router.push('/')
      })
      .catch(error => {
        this.state = true
        console.log('errora')
        console.log(error)
        setTimeout(() => {
         this.state = false
        }, 4000)
      })
      }
    }
  }
</script>

発生している問題・エラーメッセージ

Error:
UsersLoginTest#test_login_with_invalid_infomation:
NoMethodError: undefined method `document' for nil:NilClass
    test/integration/users_login_test.rb:6:in `block in <class:UsersLoginTest>'

６行目の「 assert_select "div"」の部分がnillになっており、nilに対してdocumentは使えませんと怒られました。なぜassert_select "div"がnilになるのかわかりません。どのようにすればエラーを解決できるでしょうか。

試したこと

同じエラーコードが以下の質問にあったのですが、以下の質問ではrspecでテストをしているらしくあまり参考になりませんでした。
https://stackoverflow.com/questions/36949205/undefined-method-document-for-nilnilclass-while-running-rails-tutorial-with-r

また、 assert_select "div"のほかにも assert_select "v-row"や assert_select "p"なども試してみましたが、すべてnilが帰ってくるようで同じエラー内容になりました。

補足情報（FW/ツールのバージョンなど）

バージョン情報
Rails 6.1.4.1
@vue/cli 4.5.13

Answer 1

get 'http://localhost:8080/login'
に違和感あります
get '/login'
でためしてください。

assert系のテストは作成されたhtmlを解析しますが、それの対象が document です。Nilのdocumentが無い、と言われているのはおそらく get が失敗してるから。

Comments

[akitaakita]

ご回答ありがとうございます。

先ほどget '/login'で試したのですが、同じエラーが発生しました。
そもそもの疑問なのですがrailsのテストで、vueで作ったページををテストすることは可能なのでしょうか。

[winterboum]

最近rspecばかりなのと、minitest使ってた５〜10年前と仕様が変わってるかもがあるのですが、
rspecですと 無指定だと viewは作らないので document取れません。
render_views していすると描画してくれてhtmlの確認ができます。
minitestでそういうことないか確認してみて

[akitaakita]

な、なんと、、！
minitestはもう主流じゃなかったのですね、、
非常に勉強になります。
誠にありがとうございます。

[winterboum]

いやそんなことはないと思います。
てか
そういう事情はよく知りません