vue-jest unit-testing 安裝篇

日期：

裝 vue-jest 

  • git url
  • jest 套件
  • 設定
  • 撰寫

git url

jest 套件

  1. 裝 jest, npm install --save-dev jest => 可以 執行 .jest, .test 檔案
  2. 裝 vue-jest, npm install --save-dev vue-jest => 可以 驗證 .vue 檔案
  3. 裝 test-utils, npm install --save-dev @vue/test-utils => 可用像是，測試組件不包含子組件的功能 (ShallowMount)

設定

  1. jest 25.4.0 需要 Babel 7module. npm install --save-dev "babel-core@^7.0.0-bridge.0"
  2. 加入 babel.config.js (注意 array 結構)
    exports = {
    presets: [
    '@vue/cli-plugin-babel/preset',
    [
    '@babel/preset-env',
    { targets: {
    node: 'current',
    },
    },
    ],
    ],
    };
  3. jest.config.js
    module.exports = {
    // 檢查以下附檔案名的檔案
    moduleFileExtensions: [
    'js',
    'json',
    'vue',
    ],
    // 在這個資料夾底下搜尋
    moduleNameMapper: {
    '@/(.*)$': '<rootDir>/src/$1'
    },
    // 忽略找這個資料夾
    transformIgnorePatterns: [
    '/node_modules/(?!MODULE_NAME_HERE).+\\.js$',
    ],
    // 鄉對應檔案要用到的資源
    transform: {
    '^.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
    '^.+\\.vue$': '<rootDir>/node_modules/vue-jest',
    },
    };
  1. 增加 src/actions.vue
    <template>
    <div class="text-align-center">
    <input type="text" @input="actionInputIfTrue" />
    <button @click="actionClick()">Click</button>
    <p>{{$store.getters.text}}</p>
    </div>
    </template>

    <script>

    import Vue from 'vue'
    import { mapGetters, mapActions } from 'vuex'

    export default {
    name: 'action',
    methods:{
    ...mapActions(['actionClick']),

    actionInputIfTrue: function actionInputIfTrue(event) {
    const inputValue = event.target.value
    if (inputValue === 'input') {
    this.$store.dispatch('actionInput', { inputValue })
    }
    }
    },
    }
    </script>
  2. 增加 ~/__test__/actions.test.js
    import { shallowMount, createLocalVue } from '@vue/test-utils'
    import store from '@/store'
    import Action from '@/Actions.vue'

    describe('Actions.vue', () => {
    const localVue = createLocalVue()
    const wrapper = shallowMount(Action, { store, localVue })

    it('for test', () => {
    expect(1).toBe(1)
    })
    })
  3. 調整 main.js
    import Vue from 'vue'
    import App from './Actions.vue'
    import router from './router'
    import store from './store'

    Vue.config.productionTip = false

    new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount('#app')
  4. 執行 jest or 在 package.json 的 scripts 中，加入 "test": "jest"
  5. 如果你看到這畫面，代表你 jest 架好了


補充
不讓 jest 檢查 css，可以透過 identity-obj-proxy 把 sass 弄掉npm install identity-obj-proxy --save -dev"jest": { "moduleNameMapper": { "\\.(css|scss|sass|less)$": "identity-obj-proxy" }}加在 jest.config.js 上面

 參考https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
https://medium.com/@milkmidi/jest-test-component-vue%E7%AF%87-testing-library-%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-542db03a670b
https://dwatow.github.io/2019/07-03-vuejs/jest-for-vue-x/
https://wcc723.github.io/development/2020/02/02/jest-intro/

留言

張貼留言