web-dev-qa-db-fra.com

Running jest avec bootstrap-vue

J'ai travaillé avec vuejs et bootstrap-vue récemment. J'ai décidé d'ajouter des tests unitaires à mon projet.

Je ne suis pas vraiment familier avec les tests unitaires, donc j'essaie tout ce que je peux trouver pour comprendre comment cela fonctionne.

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>

Tout semble correct avec le test. Mais j'ai eu ces aspirations et j'ai pu trouver un moyen de le réparer.

[Vue warn]: Élément personnalisé inconnu: - avez-vous enregistré le composant correctement? Pour les composants récursifs, assurez-vous de fournir l'option "nom".

[Vue warn]: Élément personnalisé inconnu: - avez-vous enregistré le composant correctement? Pour les composants récursifs, assurez-vous de fournir l'option "nom".

J'ai donc regardé autour de moi et il semble que je doive ajouter ces composants enfants au père.

Voici la documentation pour ces composants.

J'ajoute également mes fichiers de configuration (il en est de même que la vue-cli 3 les génère)

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

Si vous ajoutez bootstrap vue en tant que plugin global:

Vue.use(BootstrapVue);

Ensuite, dans vos tests, vous voudrez probablement suivre cette astuce:

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

Ce qui décrit comment vous pouvez utiliser la createLocalVue() et la configurer avec la même configuration globale que votre application:

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
})

Ensuite, vos composants doivent être enregistrés correctement-

4
chrismarx

Comme ces erreurs ne bloquent pas le développement ou le processus de test, je viens d'ajouter le drapeau --silent.

Cela ne fait que masquer les erreurs, ce n'est pas un correctif.

0
Freezy

Il est également possible de raccorder des composants comme

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