Question

我正在尝试测试将Apollo和Vuex与Jest和@ vue / test-utils结合使用的Nuxtjs SSR应用程序

如果组件导入qraphql查询将无法正常工作，并返回unexpected token错误。

如果我尝试了另一个组件，而不是直接导入查询，它依赖于vuex动作，但是我对此有错误。未定义$ store。

Nuxtjs配置是否应该在测试中正常运行，并没有存储，路由器，Apollo全部设置，或者我需要为测试做一些特殊设置？

以下是我的设置：

内部package.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>

Nuxtjs / Apollo / Vuex测试

0 个答案: