web-dev-qa-db-ja.com

bootstrap-vueでjestを実行する

私は最近vuejsと bootstrap-vue を使用しています。プロジェクトに単体テストを追加することにしました。

私はユニットテストに精通していないので、それがどのように機能するかを理解するために見つけることができるすべてのものを試しています。

Login.specs.js

import { shallowMount, mount } from '@vue/test-utils'
import Login from '@/components/auth/Login.vue'

describe('Login.vue', () => {
  it('is a Vue instance', () => {
   const wrapper = mount(Login, {
    mocks: {
     $t: () => 'Connexion' // i18N
    }
   })
  const h2 = wrapper.find('h2')
  expect(h2.text()).toBe('Connexion')
 })
})

Login.vue

<b-row align-h="center">
 <b-col class="text-center">
  <h2>{{ $t('login.connection') }}</h2>
 </b-col>
</b-row>

テストはすべて問題ないようです。しかし、私はこれらの警告を取得し、実際にそれを修正する方法を見つけることができました。

[Vue warn]：不明なカスタム要素：-コンポーネントを正しく登録しましたか？再帰的なコンポーネントの場合は、必ず「名前」オプションを指定してください。

[Vue warn]：不明なカスタム要素：-コンポーネントを正しく登録しましたか？再帰的なコンポーネントの場合は、必ず「名前」オプションを指定してください。

だから周りを見回したところ、これらの子コンポーネントを父親に追加する必要があるようです。

これらは、これらのコンポーネントの documentation です。

私は自分の構成ファイルも追加しています（vue-cli 3が生成するものと同じです）

jest.congif.js

module.exports = {
  moduleFileExtensions: [
  'js',
  'jsx',
  'json',
  'vue'
 ],
 transform: {
  '^.+\\.vue$': 'vue-jest',
  '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest- transform-stub',
  '^.+\\.jsx?$': 'babel-jest'
 },
 moduleNameMapper: {
  '^@/(.*)$': '<rootDir>/src/$1'
 },
 snapshotSerializers: [
  'jest-serializer-vue'
 ],
 testPathIgnorePatterns: [ //I've added this one, not sure if usefull
  '<rootDir>/node_modules'
 ],
 testMatch: [
  '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
 ]
}
javascriptvuejs2jestjsvue-clibootstrap-vue
13
Freezy

bootstrap vue=をグローバルプラグインとして追加する場合：

_Vue.use(BootstrapVue);
_

次に、テストで、このヒントを実行する可能性があります。

https://vue-test-utils.vuejs.org/guides/common-tips.html#applying-global-plugins-and-mixins

createLocalVue()を使用して、アプリと同じグローバル構成で設定する方法の概要を示します。

_import { createLocalVue } from '@vue/test-utils'

// create an extended `Vue` constructor
const localVue = createLocalVue()

// install plugins as normal
localVue.use(BootstrapVue)

// pass the `localVue` to the mount options
mount(Component, {
  localVue
})
_

次に、コンポーネントを適切に登録する必要があります

4
chrismarx

これらのエラーが開発プロセスやテストプロセスをブロックしていないため、--silent 国旗。

これはエラーを隠すだけで、修正ではありません。

0
Freezy

次のようなコンポーネントをスタブ化することも可能です。

const wrapper = mount(Login, {
  mocks: {
    $t: () => 'Connexion' // i18N
  },
  stubs: {
    BCol: true
  }
});
0
Jan Tumanov