새오의 개발 기록

테스트 코드 본문

카테고리 없음

테스트 코드

새오: 2022. 10. 30. 16:06

테스트 코드의 목적

직접 브라우저에 와서 일일이 값을 넣어서 테스트하지 않더라도

코드를 통해 기능 동작에 대한 검증을 하는 시간을 줄여줄 수 있음 

 

자바스크립트 테스트 코드 작성 라이브러리

 

Jest

  • 페이스북이 개발
  • 문서화 잘 되어 있음
 

Jest

By ensuring your tests have unique global state, Jest can reliably run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on how long test files take.

jestjs.io

  • 설치 방법(위 사이트의 Get started 참고)
npm install --save-dev jest

 

 

 

Jest에서 제공하는 API

  • spec
  • describe: test case의 묶음

https://jestjs.io/docs/api#describename-fn

 

Globals · Jest

In your test files, Jest puts each of these methods and objects into the global environment. You don't have to require or import anything to use them. However, if you prefer explicit imports, you can do import {describe, expect, test} from '@jest/globals'.

jestjs.io

 

 

eslint 에서 테스트 코드 작성 문법 허용해주는 방법

// eslintrc.js

env: {
    node: true,
    jest: true,
  },

 

 

Vue.js에서 컴포넌트 테스트하는 방법

import Vue from "vue";
import LoginForm from "./LoginForm.vue";

describe("LoginForm.vue", () => {
  test("컴포넌트가 마운팅되면 email이 존재하고 초기값으로 설정되어 있어야 한다.", () => {
    const instance = new Vue(LoginForm).$mount();
    expect(instance.email).toBe("");
  });
});

 

 

뷰 공식 테스트 유틸 라이브러리 소개 및 적용

 

Guides | Vue Test Utils

Guides Getting Started What is Vue Test Utils? Vue Test Utils (VTU) is a set of utility functions aimed to simplify testing Vue.js components. It provides some methods to mount and interact with Vue components in an isolated manner. Let's see an example: M

v1.test-utils.vuejs.org

// 특정 컴포넌트를 마운트 할 수 있는
import { shallowMount } from "@vue/test-utils";
// import Vue from "vue";
import LoginForm from "./LoginForm.vue";

describe("LoginForm.vue", () => {
  test("컴포넌트가 마운팅되면 email이 존재하고 초기값으로 설정되어 있어야 한다.", () => {
    // const instance = new Vue(LoginForm).$mount();
    const wrapper = shallowMount(LoginForm);
    expect(wrapper.vm.email).toBe("");
  });
});

 

저작자표시