👊 vue jest study기록

🦶 패키지 설치

node : 16.8.1
npm : 8.19.2

 🤟 vue jest 설치 

npm install @vue/test-utils --save-dev

npm install @babel/preset-env --save-dev

npm install babel-core --save-dev

npm install babel-jest

npm install jest --save-dev

npm install --save-dev jest-environment-jsdom

npm install --save-dev jest-transform-stub

npm i @vue/vue3-jest --save-dev

 

 

🤞 jest.config.js

jest.config.js는 jest를 위한 환경설정이다.

 

moduleFileExtensions : 테스트할 확장자를 설정하며, 배열로 선언 가능

transform : vue,jsx,이미지등 변환해주는 기능

moduleNameMapper : alias를 사용하는것

testMatch : 어떤 파일을 테스트 할 것인지 

testPathIgnorePatterns : 테스트를 무시할 폴더

module.exports = {
    //테스트를 실시할 확장자들을 설정
    moduleFileExtensions: [
        "js",
        "json",
        "vue",
    ],
    //jest에서는 javascript만 사용하므로 vue,이미지등을 변환해주는 것이 필요
    transform: {
        // `vue-jest`를 사용하여 모든 vue 파일(`*.vue`)을 처리합니다
        ".*\\.(vue)$": "@vue/vue3-jest",
        // `babel-jest`를 사용하여 모든 js 파일(`*.js`)을 처리합니다
        ".*\\.(js)$": "babel-jest",
        // 이미지 처리
        ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
     },
     moduleNameMapper: {
      // 별칭 @(프로젝트/src) 사용하여 하위 경로의 파일을 맵핑합니다
      "^@/(.*)$": "<rootDir>/src/$1",
    },
    testMatch: ["**/*.spec.[jt]s?(x)", "**/*.test.[jt]s?(x)"],
    // node_modules 경로 하위에 있는 모든 테스트 파일을 대상에서 제외합니다
    testPathIgnorePatterns: ["/node_modules/"],
    testEnvironmentOptions: {
      customExportConditions: ['node', 'node-addons'],
    },
    testEnvironment: "jsdom",
    bail: 1,
    verbose: true,
}

 

🫵 jest 사용법

describe 함수 : 가장 큰 범위의 함수이면 연관된 것들을 하나로 묶어주는 것.

test 함수 : 단위 테스트의 시작 함수

describe("app.vue test", () => {
  test("should ", async () => {
    expect(1).toBe(1);
  });
});

 

🤟 vue shallMount,mount

shallMount : 컴퍼넌트를 렌더링한다. 다만 자식컴퍼넌트까지는 렌더링 하지 않는다.

mount : 컴퍼넌트를 렌더링 한다. 자식 컴퍼넌트까지 렌더링 한다.

import { shallowMount } from '@vue/test-utils';
import Helloworld from '@/components/HelloWorld.vue';

let wrapper = null;

beforeEach(() => {
  wrapper = shallowMount(Helloworld);
});

describe('HelloWorld.vue testing', () => {
  test('shallowMount helloword vue', async () => {});
});

 

 

🤙 find 함수

component중에 find를 이용하여 class,id를 찾을 수 있다.

아래는 find를 이용하여 해당 class의 text를 비교하는 예제이다.

import ChildComponent from '@/components/ChildComponent.vue';
import { shallowMount } from '@vue/test-utils';

let wrapper = null;
beforeEach(() => {
  wrapper = shallowMount(ChildComponent);
});

describe('ChildComponent Testing', () => {
  test('article 존재 여부', () => {
    // 존재유무 확인
    expect(wrapper.find('.child-desc').text()).toBe('자식 article');
  });
});

".child-desc"의 클래스를 찾아서 ".child-desc"의 텍스트를 비교한다.

 

👆 props 설정하기

자식 컴퍼넌트에 jest를 이용하여 props를 설정할 수 있다.

import ListComponent from '@/components/ListComponent.vue';
import { shallowMount } from '@vue/test-utils';

let wrapper = null;

const mockData = [
  {
    Idx: 1,
    ToDoItem: 'css 공부',
    createdAt: '2023-02-01T15:00:00.000Z',
    updatedAt: '2023-02-01T15:00:00.000Z',
  },
  {
    Idx: 2,
    ToDoItem: 'Java 공부',
    createdAt: '2023-02-01T15:00:00.000Z',
    updatedAt: '2023-02-01T15:00:00.000Z',
  },
];

beforeEach(() => {
  wrapper = shallowMount(ListComponent);
});

describe('list component ', () => {
  // setProps를 통해 props 설정
  test('props 확인', async () => {
    await wrapper.setProps({
      list: mockData,
    });
    // list가 존재할 경우 class="list"를 찾아서 존재하는지 확인
    expect(wrapper.find('.list').exists()).toBeTruthy();
  });
});

 

👦 mocking

해당 코드에서 의존하는 부분이 있을 수 있다. 그러한 부분을 mocking으로 처리한다. 단위테스트 실시할때 의존성이 있는 부분이 있기 때문이다.

🙏 fn()

가짜 함수를 생성하는 함수이다.

describe('utils tests.js ', () => {
  test('func testing', () => {
    const mockFn = jest.fn();
    const returnValue = mockFn.mockReturnValue('I am a mock!');

    expect(returnValue()).toBe('I am a mock!');
  });
});

jest.fn()을 통해 가짜 함수를 생성하고 mockReturnValue('I am a mock!')을 통해 가짜 데이터를 return해준다.

그리고 return된 데이터를  expect(returnValue()).toBe('I am a mock!'); 을 통해 return된 데이터를 확인한다.

 

 

비동기로 처리하고 싶은경우는 아래처럼 처리한다.

mockResolvedValue 를 통해서 43을 return 해주고 ,  expect(result).toBe(43) 를 통해 데이터를 비교한다.

describe('utils tests.js ', () => {
  test('Asynchronous ', async () => {
    const mockFn = jest.fn().mockResolvedValue(43);
    const result = await mockFn(); // 43
    expect(result).toBe(43);
  });
});

🤌 spyOn()

함수를 단순히 몇번 호출됐는지 감시의 역할이다.

간단한 인자 두개를 받아 덧셈을 하는 calc 함수를 만들어보자.

//utils.js
const calc = (a, b) => {
  return a + b;
};

export { calc }

그리고 utils.test.js에서 utils 전체를 import하여 , calc 함수를 spyOn해보자

import * as util from '../utils';

describe('utils tests.js ', () => {
   test('calc testing', async () => {
        const spyFn = jest.spyOn(util, 'calc');
        const result = util.calc(2, 3);
        //몇번 호출되었는지 확인
        expect(spyFn).toBeCalledTimes(1);
        //어떤값을 인자에 넣었는지 확인
        expect(spyFn).toBeCalledWith(2, 3);
        //함수의 결과값을 확인
        expect(result).toBe(5);
    });
})

toBeCalledTimes : spyOn한 함수가 몇번 호출됐는지 확인하는 함수이다.

toBeCalledWith : 어떤값과 함께 호출되었는지 확인하는 함수이다.

 

💪 객체 비교 하기

객체를 비교할때에는 toBe를 사용하면 안되고 toEqual를 사용하여야 한다.

test('객체 비교하기', async () => {
    expect({ id: 1 }).toEqual({ id: 1 });
});

 

🫵 emit 테스트

자식컴퍼넌트에서 부모컴퍼넌트한테 emit을 날려야 할 때가 있다. emit을 테스트 하기 위해서는 emitted를 사용해서 확인이 가능하다.

 

//ChildComponent.vue
<template>
  <section>
    <article id="childdesc" class="child-desc" @click="click">자식 article</article>
  </section>
</template>

<script>
export default {
  emits: ['childclick'],
  setup(_, { emit }) {
    const click = () => {
      emit('childclick');
    };

    return {
      click,
    };
  },
};
</script>

<style></style>

 

//childcomponent.test.js
import ChildComponent from '@/components/ChildComponent.vue';
import { shallowMount } from '@vue/test-utils';

let wrapper = null;
beforeEach(() => {
  wrapper = shallowMount(ChildComponent);
});

describe('ChildComponent Testing', () => {
  test('child desc 클릭 후 emit["childclick"] 클릭', async () => {
    wrapper.find('#childdesc').trigger('click');
    expect(wrapper.emitted()).toHaveProperty('childclick');
  });
});

ChildComponent에서 id가 childdesc를 클릭하면 emit('childclick')을 통해 부모를 호출하거나, 부모한테 데이터 전달이 가능하다.

 

아래 코드처럼 일단 id가 childdesc를 클릭한다.

wrapper.find('#childdesc').trigger('click');

그리고 emitted에서 childclick가 존재하는지 확인한다.

expect(wrapper.emitted()).toHaveProperty('childclick');

그러면 테스트가 성공적으로 끝난걸 알 수 있다.

emit 테스팅

 

🤘 router testing

라우터를 테스트를 해보겠다. router.push를 통해 화면 이동하고 화면이동했을 때  findComponent를 통해서 존재하는지 확인해보자.

 

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

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


describe('app.vue', () => {
  test('ToDoWriteView 화면 이동', async () => {
    //router를 통해 이동
    await router.push({ name: 'addTodo' });
    //findComponent를 통해 컴퍼넌트가 존재하는지 확인
    expect(wrapper.findComponent(ToDoWriteView).exists()).toBe(true);
  });
});

 

🤘 stubs

부모컴퍼넌트에서 자식컴퍼넌트를 단순히 렌더링 하고 싶은 경우가 있다.

아래 예시를 보자

import ParentView from '@/views/ParentView.vue';
import RenderComponent from '@/components/RenderComponent.vue';
import { mount } from '@vue/test-utils';

let wrapper = null;

beforeEach(() => {
  wrapper = mount(ParentView, {});
});

describe('ParetnView render', () => {
  test('parente view rendering', async () => {
    //RenderComponent이 렌더링 되는지 확인
    console.log(wrapper.html());
    expect(wrapper.findComponent(RenderComponent).exists()).toBe(true);
  });
});

 

위 처럼 작성할 경우 component내의 outerFunc함수를 호출한다. 만약 api를 호출하는 것이 필요하다면, 단위테스트에는 필요없는 부분이다. 부모컴퍼넌트에서는 "자식 컴퍼넌트가 렌더링이 되면 된다" 이기 때문이다.

그리하여 "stubs"을 통하여 가짜로 만들어주고 렌더링 되는지만 체크해보자.

 

import ParentView from '@/views/ParentView.vue';
import RenderComponent from '@/components/RenderComponent.vue';
import { mount } from '@vue/test-utils';

let wrapper = null;

beforeEach(() => {
  wrapper = mount(ParentView, {
    global: {
      stubs: {
        RenderComponent: true,
      },
    },
  });
});

describe('ParetnView render', () => {
  test('parente view rendering', async () => {
    //RenderComponent이 렌더링 되는지 확인
    expect(wrapper.findComponent(RenderComponent).exists()).toBe(true);
  });

  test('stubs을 이용한 렌더링', async () => {
    console.log(wrapper.html());
    expect(wrapper.findComponent(RenderComponent).exists()).toBe(true);
  });
});

render3

"RenderComponent"를 stubs에 담아주었다. 그러고 나서 wrapper.html()을 사용해보면 "RenderComponent"에서 함수 호출을 안하는 것을 확인할 수 있다. 그리고 findComponent를 통해 "RenderComponent"를  찾을 수 있다.

 

🤘form checkbox multi 체크 testing

실제로 체크박스를 체크할때는 단건으로 체크하는 경우는 그렇게 많지 않다 checkbox는 여러개를 선택할때 사용되곤 한다.

그리하여 form에서 checkbox를  여러개 선택할때 test 시도해보자.

 

상황은 인제 "좋아하는 언어를 선택하고 그리고 선택된 값을 화면에 보여주자" 이다.

 

아래는 좋아하는 언어를 선택하는 vue파일이다.

1. form안에 여러개의 Input[type=checkbox]를 만든다.

2. 선택될때 마다 computed를 통해서 <div id="select-language"></div> 에 보여주자

//FormView3.vue
<template>
  <form @submit.prevent="submit">
    <fieldset>
      <legend>좋아하는 언어는?</legend>

      <div>
        <label for="checkbox1">자바</label>
        <input type="checkbox" v-model="formData.checkbox" id="checkbox1" value="java" />
      </div>
      <div>
        <label for="checkbox2">자바스크립트</label>
        <input type="checkbox" v-model="formData.checkbox" id="checkbox2" value="javascript" />
      </div>
      <div>
        <label for="checkbox3">C++</label>
        <input type="checkbox" v-model="formData.checkbox" id="checkbox3" value="c++" />
      </div>
    </fieldset>
  </form>

  <div id="select-language">
    {{ compCheckbox }}
  </div>
</template>
<script>
import { computed, reactive } from 'vue';

export default {
  setup() {
    const formData = reactive({
      checkbox: [],
    });

    const compCheckbox = computed(() => {
      return formData.checkbox.join();
    });

    const submit = () => {};

    return {
      formData,
      submit,
      compCheckbox,
    };
  },
};
</script>
<style scoped></style>

인제 테스트 코드를 작성해보자

1. find함수를 통해 checkbox를 가져온다.

2.setValue 함수를 통해 값을 세팅해준다.(다만 checkbox는 인자에 아무것도 넣지 않으면, value에 세팅된 값으로 세팅된다.)

3.선택된 값이 정확하게 화면에 뿌려지고 있는지 확인한다.

import { shallowMount } from '@vue/test-utils';
import FormView3 from '../FormView3.vue';
describe('formview3 vue', () => {
  let wrapper = null;
  beforeEach(() => {
    wrapper = shallowMount(FormView3);
  });
  test('체크박스 값 세팅 및 비교', async () => {
    //1. find함수를 통해 checkbox를 가져온다.
    const chkbox1 = await wrapper.find('input[type="checkbox"][id=checkbox1]');
    const chkbox2 = await wrapper.find('input[type="checkbox"][id=checkbox2]');
    // 2.setValue 함수를 통해 값을 세팅해준다.(다만 checkbox는 인자에 아무것도 넣지 않으면, value에 세팅된 값으로 세팅된다.)
    await chkbox1.setValue();
    await chkbox2.setValue();
    //3.선택된 값이 정확하게 화면에 뿌려지고 있는지 확인한다.
    const selectLanguage = await wrapper.find('#select-language');
    expect(selectLanguage.text()).toBe('java,javascript');
  });
});

성공적인 결과를 확인 할 수 있다.