Тестирование Nuxtjs / Apollo / Vuex - PullRequest
Новая
       33

Тестирование Nuxtjs / Apollo / Vuex

0 голосов
/ 04 июня 2019

Я пытаюсь протестировать приложение Nuxtjs SSR, использующее Apollo и Vuex с Jest и @ vue / test-utils

если компонент импортирует запросы qraphql, он не будет работать и вернет ошибку unexpected token.

И если я попробовал другой компонент, который вместо импорта запросов напрямую зависел от действий vuex, но я получил ошибку об этом. $ Store не определен.

Разве конфигурация Nuxtjs не должна нормально работать с тестом и иметь все настройки магазина, маршрутизатора, Apollo или есть какие-то особые настройки, которые мне нужно сделать для тестирования?

ниже мои настройки:

внутри пакета. Json 

"babel": {
    "env": {
      "test": {
        "presets": [
          [
            "@nuxt/babel-preset-app",
            {
              "targets": {
                "node": "current"
              }
            }
          ]
        ],
        "plugins": [
          "@babel/plugin-syntax-dynamic-import"
        ]
      }
    },
    "presets": [
      "@babel/preset-env"
    ],
    "plugins": [
      "@babel/plugin-syntax-dynamic-import"
    ]
  },
  "jest": {
    "moduleNameMapper": {
      "^~/(.*)$": "<rootDir>/$1",
      "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    },
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "transform": {
      "^.+\\.vue$": "vue-jest",
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.jsx?$": "babel-jest"
    }
  }

тест, который я запускаю invest.test.js: 

import { createLocalVue, mount, RouterLinkStub } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import CommentInvestir from '../pages/comment-investir'

describe('comment-investir.vue', () => {
  let localVue
  beforeEach(() => {
    localVue = createLocalVue()
    localVue.use(BootstrapVue, {})
  })

  test('is a Vue instance', () => {
    const wrapper = mount(CommentInvestir, { localVue })
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
  test('If profile physique exsist disable Button', () => {
    const wrapper = mount(CommentInvestir, {
      stubs: {
        NuxtLink: RouterLinkStub
      }
    })
    wrapper.setData({
      userProfiles: [{ id: '01', type: 'physique', status: 'submitted' }]
    })
    expect(wrapper.vm.userProfiles.length).toBe(1)
    expect(wrapper.vm.hasProfilePhy).toBeTruthy()
    expect(wrapper.text()).toBe('Compléter mon profil investisseur')
  })
})

Компонент, который я тестирую: 

<template>
  <section class="page">
    <Title title="Bienvenue chez Fundimmo !">
      Comment Investir?
    </Title>

    <div class="flex">
      <nuxt-link to="profile/add/physique" class="box-wrapper" :class="{disabled: hasProfilePhy}">
        <Box t="physique" subt="En tant que personne">
          Je suis un particulier
        </Box>
      </nuxt-link>

      <nuxt-link to="profile/add/morale">
        <Box t="morale" subt="En tant que personne" icon="Bldg">
          J'investis en tant qu'entreprise
        </Box>
      </nuxt-link>
    </div>
  </section>
</template>

<script>
import Title from '~/components/UI/Title'
import Box from '~/components/UI/Box'

export default {
  name: 'CommentInvestir',
  middleware: 'authenticated',
  components: { Title, Box },
  data: function() {
    return {
      userProfiles: this.$store.state.profiles
      // hasProfilePhy: false
    }
  },

  computed: {
    hasProfilePhy() {
      return !!this.userProfiles.some(
        p => p.type === 'physique' && p.status !== 'draft'
      )
    }
  },
  created() {
    if (this.hasProfilePhy) {
      this.$router.push('/profile/add/morale')
    }
  }
}
</script>
...