$ node -v
v14.8.1

rules: {
 "no-console": "error", // 정상을 위하여 "off"로 설정 필요
 // "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
 // "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},

export default new VueRouter({
 routes: [
 {
 path: '/login',
 component: () => import('@/views/LoginPage.vue'),
 },
 {
 path: '/signup',
 component: () => import('@/views/SignupPage.vue'),
 },
 ],
});

import axios from 'axios';
import { setInterceptors } from './common/interceptors';
// 엑시오스 초기화 함수 (인증전 즉, 로그인 전)
function createInstance() {
 return axios.create({
 baseURL: process.env.VUE_APP_API_URL,
 });
}
// 액시오스 초기화 함수 (인증후 즉, 로그인 후)
function createInstanceWithAuth(url) {
 const instance = axios.create({
 baseURL: `${process.env.VUE_APP_API_URL}${url}`,
 });
 return setInterceptors(instance);
}
export const instance = createInstance();
export const posts = createInstanceWithAuth('posts');

// 로그인, 회원 가입, 회원 탈퇴 등을 위한 API
import { instance } from './index';
// 회원가입 API
function registerUser(userData) {
 return instance.post('signup', userData);
}
// 로그인 API
function loginUser(userData) {
 return instance.post('login', userData);
}
export { registerUser, loginUser };

// 학습 노트 조작과 관련된 CRUD API 함수
import { posts } from './index';
// 학습 노트 데이터를 조회하는 API
function fetchPosts() {
 return posts.get('/');
}
// 학습 노트 데이터를 생성하는 API
function createPost(postData) {
 return posts.post('/', postData);
}
export { fetchPosts, createPost };

async deleteItem() {
 		if (confirm('You want to delete it?')) {
 			await deletePost(this.postItem._id);
 			this.$emit('refresh');
 		}
 	},

export function formatDate(value) {
 const date = new Date(value);
 const year = date.getFullYear();
 let month = date.getMonth() + 1;
 month = month > 9 ? month : `0${month}`;
 const day = date.getDate();
 let hours = date.getHours();
 hours = hours > 9 ? hours : `0${hours}`;
 const minutes = date.getMinutes();
 return `${year}-${month}-${day} ${hours}:${minutes}`;
}

//main.js
import { formatDate } from '@/utils/filters';
Vue.filter('formatDate', formatDate);

<div class="post-time">
 {{ postItem.createdAt | formatDate }}
 <i class="icon ion-md-create" @click="routeEditPage"></i>
 <i class="icon ion-md-trash" @click="deleteItem"></i>
</div>

//`package.json` 설정
 "scripts": {
 "test": "vue-cli-service test:unit --watchAll",
},
//--watchAll : 변경즉시 반영 됨

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

// 테스트 실행 명령어
$npm t

// jest 함수들의 eslint 인식 빨간펜 처리
// .eslintrc.js
env: {
 node: true,
 jest: true,
},

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

import LoginForm from './LoginForm.vue';
import { shallowMount } from '@vue/test-utils';
describe('LoginForm.vue', () => {
 test('ID는 이메일 형식이여야 한다.', () => {
 const wrapper = shallowMount(LoginForm);
 const idInput = wrapper.find('#username');
 console.log(idInput.html());
 });
});

describe('LoginForm.vue', () => {
 test('ID는 이메일 형식이여야 한다.', () => {
 const wrapper = shallowMount(LoginForm, {
 data() {
 return {
 username: 'test@abc.com',
 };
 },
 });
 const idInput = wrapper.find('#username');
 console.log('InputBox Value ', idInput.element.value);
 console.log(wrapper.vm.isUsernameValid);
 });
});

// LoginForm.vue
<button
 :disabled="!isUsernameValid || !password"
 type="submit"
 class="btn"
 v-bind:class="!isUsernameValid || !password ? 'disabled' : null"
>
// LoginForm.spec.js
test('#3. ID와 PWD가 입력되지 않으면 로그인 버튼이 비활성화 된다.', () => {
 	const wrapper = shallowMount(LoginForm, {
 		data() {
 			return {
 // 값이 없으면 통과, 값이 있으면 실패
 				username: 'a@a.com',
 				password: '1234',
 			};
 		},
 	});
 	const button = wrapper.find('button'); // '.btn'
 	expect(button.element.disabled).toBeTruthy();
 });