Vuetify가 설치된 환경에서 Jest를 실행하는 설정

Vuetify를 설치한 환경에서 Jest를 이용할 때 해 두는 것이 좋은 설정입니다.

각 설정은 tests/unit 디렉토리에 작성한 setup.js를 작성합니다. tests/unit/setup.js의 설정을 반영하려면 jest.config.js에 다음을 설정합니다.

jest.config.js

"setupFiles": ["./tests/unit/setup.js"]

경고를 출력하지 않는 설정

[Vue warn]: Unknown custom element:~

Vuetify의 컴퍼넌트를 Jest가 인식하지 않기 위해서 출력되는 경고입니다. tests/unit/setup.js에 다음을 설정하면 출력되지 않습니다.

tests/unit/setup.js

import Vue from "vue";
import Vuetify from "vuetify";

Vue.use(Vuetify);

Download the Vue Devtools extension for a better development experience:~

브라우저의 경우 Vue Devtools 확장 프로그램을 설치하는 것이 좋습니다 메시지이지만 Jest 환경에는 의미가없는 메시지입니다. tests/unit/setup.js에 다음 설정을 하면 출력되지 않습니다.

tests/unit/setup.js

Vue.config.devtools = false;

You are running Vue in development mode.~

production 환경에 전개할 때 production mode로 전환한다는 메세지인 것 같지만, 이것도 테스트 실행 중에는 의미가 없는 메세지입니다.

tests/unit/setup.js에 다음 설정을 하면 출력되지 않습니다.

tests/unit/setup.js

Vue.config.productionTip = false;

버튼 교체

Vuetify를 설치한 환경에서는 button의 외형이 바뀝니다. 아래 그림과 같이 버튼 테두리가 사라지고 입체적으로 보이지 않습니다.



다음과 같이 v-btn으로 바꿀 수 있습니다.

<v-btn id="vBtnClick" @click="onVbtnClick">v-btn</v-btn>

클릭하면 onVbtnClick 메서드를 호출하도록 설정합니다.

브라우저에서 실행하면 onVbtnClick 메서드가 호출됩니다. 그러나 다음 테스트는 onVbtnClick 메서드를 호출하지 않고 실패합니다.

describe("v-btnがクリックしたときに、割り当てられたメソッドが呼び出されたことを確認する", () => {
  it("v-btnがクリックしたときに、割り当てられたメソッドが呼び出されたことを確認する", () => {
    const wrapper = shallowMount(SampleTextArea);
    const onVbtnClick = jest.fn();
    wrapper.setMethods({onVbtnClick});
    wrapper.find("#vBtnClick").trigger("click");
    expect(onVbtnClick).toHaveBeenCalledTimes(1);
  });
});

v-btn 설정을 다음과 같이 변경하면 테스트가 성공합니다.

<v-btn id="vBtnClick" @click.native="onVbtnClick">v-btn</v-btn>