Jest 奇遇記

[larrykkk]

紀錄 jest 學習遇到的障礙與解決方案

[larrykkk]

遇到... [Vue warn]: Unknown custom element:

ans: https://github.com/ElemeFE/element/issues/11811 解決方法是把缺少的組件都引入到 test 中，才不會報錯

import { mount, shallowMount, createLocalVue } from "@vue/test-utils";
import ElementUI from "element-ui";
const localVue = createLocalVue();
localVue.use(ElementUI);

//some code
test("is a Vue instance", () => {
  const wrapper = shallowMount(create, {
    localVue,
    store
  });
  expect(wrapper.isVueInstance()).toBeTruthy();
});
//some code

[Vue warn]: Unknown custom element: ? 一樣，在測試檔案引入 fontawesome.js

[larrykkk]

TypeError: Cannot read property 'commit' of undefined ?

找不到 vuex 的東西 https://github.com/vuejs/vue-test-utils/issues/116#issuecomment-374960369 解決方法: mock 出一個最小可行的 vuex store 讓 test 可以運行

[larrykkk]

使用 Jest 進行 Front-End Unit Test(別人的分享簡報) https://speakerdeck.com/patw0929/shi-yong-jest-jin-xing-front-end-unit-test?slide=56

[larrykkk]

jest API 使用紀錄

一個 describe 下可已有多個 it(test) 斷言 例如:

describe("test login form", () => {
    it("some feature description", (done) => {
        // code
    });
    it("some feature description ", (done) => {
        // code
    });
    it("some feature description ", (done) => {
        // code
    });
}

[larrykkk]

優質文章:

• https://medium.com/@envive.tw/%E5%BE%9E%E7%AF%84%E4%BE%8B%E5%AD%B8%E7%BF%92-vue-js-%E7%9A%84-unit-test-44e6f9f1b903 (使用 factory 抽象 shallowMount)
• https://alexjover.com/blog/test-computed-properties-and-watchers-in-vue-js-components-with-jest/ (測試 computed & watch)

[larrykkk]

優質工具

• https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest (vscode extend)
• https://github.com/jest-community/vscode-jest/issues/78 (自動補全)

[larrykkk]

測試 watch 內的 method 最後有沒有觸發

import { mount, shallowMount, createLocalVue } from "@vue/test-utils";
import create from "@/pages/issue/create.vue";
import ElementUI from "element-ui";
import Vuex from "vuex";

import { library, config } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
config.autoAddCss = false;
library.add(fas, far, fab);

const localVue = createLocalVue();
localVue.use(ElementUI);
localVue.use(Vuex);
localVue.component("font-awesome-icon", FontAwesomeIcon);

const factory = (localVue, store) => {
  return shallowMount(create, {
    localVue,
    store
  });
};

describe("create.vue", () => {
  // add the 2 lines below
  let store;
  let wrapper;
  let spy;

  beforeEach(() => {
    store = new Vuex.Store({
      state: {
        isEditing: false
      },
      mutations: {
        changeEditStatus(state, payload) {
          state.isEditing = payload;
        }
      }
      // actions: {}
    });
    wrapper = factory(localVue, store);
  });

  it("is watch have been trigger", async () => {
    const spy = jest.spyOn(wrapper.vm, "addColorAndRemoveColor");
    wrapper.vm.formData.standpoint.pop();
    await wrapper.vm.$nextTick();
    expect(spy).toBeCalled();
  });
});