【Vue Unit test】當用 vue CLI + quasar 如何Unit test （jest)

如果在 Vue Cli 的專案裡使用 quasar ，做 unit test的時候會遇到下面的error：

[Vue warn]: Unknown custom element: <q-icon> - did you register the component correctly?

如果是用 quasar CLI，那照 quasar 文件下

quasar ext add @quasar/testing-unit-jest

但因為我是用 vue CLI，所以用 vue CLI 的 unit jest ，要自己配置

裝 unit-test 和 babel-jest

vue add unit-jest

npm install babel-jest --dev

接著，兩個步驟：

一、設定 jest.config.js

jest.config.js 必須要有

moduleNameMapper: {
    'quasar': '<rootDir>/node_modules/quasar/dist/quasar.umd.min.js',
}

我的 jest.config.js 最後整份長這樣：

module.exports = {

  preset: '@vue/cli-plugin-unit-jest',

  moduleFileExtensions: ['js', 'json', 'vue'],

  verbose: true,

  moduleNameMapper: {

    'quasar': '<rootDir>/node_modules/quasar/dist/quasar.umd.min.js',

  },

  resolver: null,

  transformIgnorePatterns: [

    'node_modules/core-js',

    'node_modules/babel-runtime',

    'node_modules/vue',

  ],

  transform: {

    '.*\\.(js)$': 'babel-jest',

    '.*\\.(vue)$': 'vue-jest'

  }

}

二、在要跑測驗的 test/example.spec.js 引入 quasar  組件

import  { Quasar, QIcon } from 'quasar'

describe('Test a component', () => {
    it(('test something')=>{

        ... 在裡面寫測試...
    })
}

三、如果遇到無法引入 quasar 的問題

如果遇到以下報錯：

babel-plugin-transform-imports: import of entire module quasar not allowed due to preventFullImport setting

那可能是有裝 babel-plugin-transform-imports ，並且 preventFullImport設定為 ture 的緣故。

這時，請看看跑測試的 .spec.js 文件是否是用 import Quasar from 'quasar'的方式引入 Quasar？請改成 import { Quasar } from 'quasar'。或者卸載 babel-plugin-transform-imports

babel-plugin-transform-imports 的用途是將用局部引入的方式轉譯import語法，進而讓build出來的東西變小，但 vue CLI 應該有預設一樣的功能。因為我分別在有裝babel-plugin-transform-imports，和沒裝的情況下，build了兩次專案，發現兩次 dist 的容量都一樣。所以 vue CLI 專案應該是不需要 babel-plugin-transform-imports