모든 참조를 읽고 정리했습니다.
가장 깔끔한 Jest를 설정합시다.

Jest란?

Facebook이 개발한 자바스크립트 단위 테스트 프레임워크.
Node상에서 동작하기 때문에, 간편하게 테스트를 실행할 수 있는 것이 특징.

Jest · 🃏 편안한 자바 스크립트 테스트

작업환경

Laravel 5.7

Docker on Mac

Vue.js라든지는 Laravel mix의 것

설정

Jest라든지 npm install

npm install --save-dev jest babel-jest @babel/core babel-core@bridge @babel/preset-env vue-jest @vue/test-utils

각 사람의 설명

jest
Jest 본체

babel-jest
babel과 jest를 연계시키는 것

@babel/core
Babel 본체의 최신 버전
Babel은 800만 개의 JavaScript 구문을 특정 버전과 호환되는 구문으로 변환합니다.
Node에서는 최신 JavaScript 구문(import/export 등 포함)이 작동하지 않습니다.
그 때문에, Babel를 사용해 트랜스파일 해 줍니다.

babel-core@bridgevue-jest 가 @babel/core 가 아니라 babel-core 를 참조해 버린 것 같아, 이것을 해결하기 위해서 인스톨.
Babel 7.x계이지만 이름은 babel-core Babel 본체.

@babel/preset-env
산만큼 있는 Babel의 구문 변환에 관계되는 라이브러리를 좋은 느낌에 자동적으로 사용해 주는 것.
참고 : babel-preset-env를 쉽게 만져 보았습니다. - Qiita

vue-jest
vue를 jest로 테스트 할 수있는 것

@vue/test-utils
Vue 테스트를 쉽게 작성할 수 있는 유틸리티

Babel 버전에주의

Babel 7.x에서 플러그인 접두사로 @babel/가 붙습니다.
6.x 이전의 플러그인을 사용하면 잘 작동하지 않는 것 같습니다.

설정 파일 만들기

babel.config.js (.babelrc)

Babel의 설정 파일입니다.babel.config.js 하지만 .babelrc 하지만 좋기 때문에 소스 루트에 배치합니다. 아마 둘 다 있는 것은 좋지 않기 때문에 어느 쪽인가 한쪽으로 합시다.

babel.config.js

module.exports = {
    presets: [
        ['@babel/preset-env', {modules: false}]
    ],
    env: {
        test: {
            presets: [
                ['@babel/preset-env', {targets: {node: 'current'}}]
            ]
        }
    }
};

jest.config.js

어떤 파일 이름을 테스트할지, 어떤 파일 이름을 어떤 모듈로 변환할지 등을 설정할 수 있습니다.

jest.config.js

module.exports = {
    transform: {
        '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
        '^.+\\.js$': '<rootDir>/node_modules/babel-jest'
    },
    moduleFileExtensions: [
        'js',
        'vue'
    ],
};

package.json (기존의 것을 편집)

Jest 시작 명령을 작성합니다.NODE_ENV=test 라고 하는 것으로 Node에 테스트 환경인 것을 명시하고 있습니다.

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        ... ,
        "test": "NODE_ENV=test jest"  <-追記
    },
    "devDependencies": { ... },
    ...
}

테스트 작성

테스트 케이스를 만들어 보자.

이런 파일을 테스트 대상으로 해 보았습니다.
칼리화하고 있는 2개의 숫자를 더하는 것만의 함수입니다.

ExampleSum.js

export default{
    sum(x){
        return (y){
            return x + y;
        }
    }
}

이것을 테스트하는 스크립트는 이런 느낌.

example.test.js

import ExampleSum from "path/to/ExampleSum";

test('test sum()', ()=>{
    expect(ExampleSum.sum(1)(2)).toBe(3);
}

실행해 보자.

npm test 와 터미널에 타이핑하여 Jest를 움직여 보자.-- 로 파일명을 연결하는 것으로 그 파일명과 부분 일치하는 파일만을 테스트 대상으로 줍니다.

npm test -- example.test.js

그 외의 CLI 옵션은 Jest CLI Options · Jest 에.

async / await도 테스트 할 수 있습니다.

PromiseExample.js

export default {
    sleep() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve();
            }, 500);
        });
    }
}

test('test async', async () => {
    await PromiseExemple.sleep();
    expect(true).toBe(true);
});

Vue의 프런트 엔드 테스트도 적용

가이드 | Vue Test Utils

ExampleComponent.vue

<template>

</template>

<script>
    export default {
        name: "ExampleComponent",
        methods: {
            sum(x, y) {
                return x + y;
            }
        }
    }
</script>

<style scoped>

</style>

component.test.js

import ExampleComponent from "./models/ExampleComponent";

const {mount} = require("@vue/test-utils");

test('Vue component test', () => {
    const component = mount(ExampleComponent);
    expect(component.isVueInstance()).toBeTruthy();
    expect(component.vm.sum(1, 2)).toBe(3);
});

component.vm 가 우리의 잘 아는 Vue 컴퍼넌트 인스턴스입니다.
DOM을 조작하여 양식을 입력하거나 클릭할 수도 있습니다.
@babel/preset-env 가 놀랄만큼 편리했던 것을 알았다.