Как добавить / смоделировать библиотеку Nuxt Auth при тестировании компонентов в Nuxt с помощью Jest - PullRequest
Новая
       27

Как добавить / смоделировать библиотеку Nuxt Auth при тестировании компонентов в Nuxt с помощью Jest

0 голосов
/ 06 января 2020

JS newb ie здесь.

Я создал приложение Nuxt и глобально внедрил промежуточное программное обеспечение @nuxt/auth в моем nuxt.config.js. В моем приложении все работает как положено.

Теперь я хотел бы протестировать некоторые из моих компонентов, которые ссылаются на объект $auth. 

// ~/components/hello_component.vue

<template>
  <div>
    <div v-if="$auth.loggedIn">
      <h1>Hi, {{ userName }}</h1>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    userName: "Archduke Chocula"
  }
}
</script>

У меня есть тест, который выглядит следующим образом: 

// ~/spec/components/hello_component.spec.js

import { mount } from '@vue/test-utils'
import Hello from '@/components/hello_component.vue'

describe('Hello Component', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Hello)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

Из-за чего возникает следующая ошибка 

Error in render: "TypeError: Cannot read property 'loggedIn' of undefined"

Так что мне нужно где-то определить auth, поэтому мои вопросы:

  1. Где и как следует Я добавляю эту зависимость в мои тесты (для каждого теста? Глобально для всех тестов?)?
  2. Как я могу высмеять ответ метода loggedIn, чтобы я мог протестировать сценарий ios, где я либо вход / выход?
  3. Есть ли способ смоделировать среду Nuxt в моих тестах, чтобы я мог протестировать свои компоненты et c, как если бы они были смонтированы в Nuxt? Это даже хорошая идея?

Заранее спасибо за любую помощь!

1 Ответ

3 голосов
/ 22 января 2020

Вы можете смоделировать объект $ auth, передав его в объект options при вызове mount 

import { mount } from '@vue/test-utils'
import Hello from '@/components/hello_component.vue'

const authMock = {
  loggedIn: true
};

describe('Hello Component', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Hello, {
      mocks: {
        $auth: authMock
      }
    })
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

Вы можете расширить макет, однако например, или измените значения, которые он возвращает для каждого теста.

...