🖖 vue jest router 생긴 문제

이번에는 vue-router를 test하는 과정에서 실제 router를 쓰는과정에서 생긴 문제에 대해서 적어보고자 한다.

app.test.js에서 실제 router를 import하였고, router.push({name:'todolist'})으로 이동하는 과정에서 ToDoListView가 렌더링되었고, ToDoListView에서 외부함수(axios호출 등등)가 동작하는 일이 일어났다.

여기서 테스트 하고 싶은건 자식 componet가 렌더링 되는것만 확인하고 싶었다. 즉 ToDoListView가 렌더링만 되는지 확인하고 싶었다.

처음에 작성한 코드는 아래와 같다.

import App from '@/App.vue';
import { mount } from '@vue/test-utils';
import ToDoListView from '../views/ToDoListView.vue';
import router from '@/router/index';
let wrapper = null;

beforeEach(() => {
  wrapper = mount(App, {
    global: {
      plugins: [router],
    },
  });
});

describe('app.vue', () => {

  test('ToDoListView 화면 이동', async () => {
    await router.push({ name: 'todolist' });
    expect(wrapper.findComponent(ToDoListView).exists()).toBe(true);
  });
});

위와 같이 작성할 경우 아래 console.error가 발생하였다.

분명 렌더링이 된건 맞지만, 외부함수를 호출하면서 axios오류가 발생하였다.

error

그리하여 2~3일간의 고민을 거쳐 stubs을 이용할려고 하였지만 router-view에서는 stubs을 사용해도 소용이 없었다. 그리하여 결국 선택한 방법은 jest.mock을 이용한 방법이었다.

 

import App from '@/App.vue';
import { mount } from '@vue/test-utils';
import ToDoListView from '../views/ToDoListView.vue';
import router from '@/router/index';
let wrapper = null;

jest.mock('../views/ToDoListView.vue', () => ({
  name: 'ToDoListView',
  template: `<div></div>`,
}));

beforeEach(() => {
  wrapper = mount(App, {
    global: {
      plugins: [router],
    },
  });
});

describe('app.vue', () => {
  test('ToDoListView 화면 이동', async () => {
    await router.push({ name: 'todolist' });
    expect(wrapper.findComponent(ToDoListView).exists()).toBe(true);
  });
});

jest.mock을 이용하여서 결국 가짜 컴퍼넌트를 만들었고, div하나를 만들었고, 지금은 단순히 ToDoListView가 렌더링이 되는지 확인만 필요하기 때문에 jest.mock을 이용하였다.

 

 

👍🏽 후기

이번에도 별거아닌걸 2~3일 고민하였다. stubs을 이용할려고 계속해서 찾고 있었지만, 해결방안을 찾지 못하여 , mock을 이용하였다.

이게 현재로서는 최선의 선택이었다고 생각한다.