134. Jest | 테스팅 환경 구성 | 테스트 코드가 필요한 이유

테스트 코드가 필요한 이유

- 개발자가 직접 브라우저로 가서 값을 넣어보며 테스트를 하지않아도 기능이 잘 돌아간다는 보장을 테스트 코드를 통해 할 수있다.

- 테스트 코드는 일일이 기능을 손으로 확인하는 시간을 줄여준다

---

Jest 

- Javascript Testing Framework

- 페이스북이 개발해서 높은 사용률을 가지고 있으며 문서화가 잘 되어있다.

- 실제로 테스팅을 할때 필요한 기능을 잘 제공해주고 있어서 많이 사용되고 있다.

https://joshua1988.github.io/vue-camp/testing/jest-testing.html

Unit Testing with Jest | Cracking Vue.js

 

---

 

1. jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  testMatch: [
    '<rootDir>/src/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
  ],
};

 

2. package.json

{
  "name": "vue-til",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service test:unit --watchAll",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^3.4.4",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    // jest
    "@vue/cli-plugin-unit-jest": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    // test
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.10"
  }
}