add : CI구성용 추가 설치 및 테스트 코드 작성 [NTT-Front-04]

BacklogNumber

Domain

프로젝트환경

Issue

Status

Complete

생성 일시

2023/06/12 09:25

CI는 지속적인 통합(Continuius Integration)의 약자이다.

새로운 코드들이 자동으로 빌드 및 테스트 되어 레포지토리에 통합되는 것을 의미한다.

협업 프로젝트의 경우 하나의 리포지터리의 다수의 인원이 참여하게 되는데

다수의 인원이 개별로 코드를 작성하고 하나의 리포지터리에 통합하게 되는데 이 과정중에서 오류가 발생하는 경우가 생길수 있다. 이 오류를 방지하기 위해 CI를 구성하게 된다.

CI는 Build 후에 Test 과정을 거치면서 이뤄지게 되는데 현재 프로젝트는 Vue.js는 대부분이 Jest를 사용해서 Test를 수행중이다.

Jest 설치

PS C:\repository\NTT_Frontend_Vue> npm install --save-dev jest 

added 269 packages, changed 1 package, and audited 1251 packages in 5s

9 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
JavaScript
복사

Jest 도구를 전역으로 설치할수도 있지만 현재는 이 프로젝트에서만 실행되기 위해 개별적으로 설치를 진행했다.

성공적으로 설치가 완료가 된 것 같다.

npm run test 완료하기

PS C:\repository\NTT_Frontend_Vue> npm run test
npm ERR! Missing script: "test"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\d9801\AppData\Local\npm-cache\_logs\2023-06-12T09_52_53_243Z-debug-0.log
JavaScript
복사

npm run test를 실행하면 이런식으로 오류가 뜨는데

test라는 이름의 스크립트가 존재하지 않는다는 오류가 뜨는걸 알 수 있다.

해당 스크립트는 package.json에서 수정하여야 한다.

package.json 수정 전

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
JavaScript
복사

위의 코드는 package.json의 스크립트 구문이다.

test가 존재하지 않는다는걸 알 수 있다.

package.json 수정 후

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest" 
  },
JavaScript
복사

수정 완료 후에 npm run test를 실행해보겠다.

PS C:\repository\NTT_Frontend_Vue> npm run test

> frontend@0.1.0 test
> jest

 FAIL  tests/unit/example.spec.js
  ● Test suite failed to run

    Cannot find module '@vue/test-utils' from 'tests/unit/example.spec.js'

    > 1 | import { mount } from '@vue/test-utils';
        | ^
      2 | import HelloWorld from '@/components/HelloWorld.vue';
      3 |
      4 | test('renders message when component is mounted', () => {

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.require (tests/unit/example.spec.js:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.906 s
Ran all test suites.
JavaScript
복사

테스트 코드가 있는 파일을 찾아내었고 Test까지 완료하였으나 test가 제대로 진행이 되지 않았음을 알 수 있다. 이제 간단한 Component와 해당 Component를 연결해주면 될 것 같다

기본 Component 작성중에 하나하나 쓰기 귀찮아서

VisulStudioCode 에서 Vetur이라는 확장프로그램을 추가하였다

추가후에 빈 파일에서 Vue라는 단어를 작성하면 자동완성기능이 동작한다.

TestExampleView

TestExampleForm

TestExampleFrom.test.js

해당 파일들을 작성하였고

npm run test

PS C:\repository\NTT_Frontend_Vue> npm run test 

> frontend@0.1.0 test
> jest

 FAIL  tests/unit/example.spec.js
  ● Test suite failed to run

    Cannot find module '@vue/test-utils' from 'tests/unit/example.spec.js'

    > 1 | import { shallowMount } from '@vue/test-utils';
        | ^
      2 | import TestExampleForm from '@/components/TestExampleForm.vue';
      3 |
      4 | describe('TestExampleForm', () => {   

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:42odules/jest-resolve/build/resolver.js:427:11)   
      at Object.require (tests/unit/example.spec.js:1:1).js:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.708 s
Ran all test suites.
JavaScript
복사

오류는 @vue/test-utils모듈을 찾을수 없다는 오류이다.

해당 모듈을 설치해보자

PS C:\repository\NTT_Frontend_Vue> npm install --save-dev @vue/test-utils
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: frontend@0.1.0
npm ERR! Found: vue@2.7.14
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.14" from the root project  
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.1" from @vue/test-utils@2.3.2
npm ERR! node_modules/@vue/test-utils
npm ERR!   dev @vue/test-utils@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\d9801\AppData\Local\npm-cache\_logs\2023-06-12T11_10_38_370Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\d9801\AppData\Local\npm-cache\_logs\2023-06-12T11_10_38_370Z-debug-0.log
JavaScript
복사

npm install —sqve-dev @vue/test-utils 라는 코드는 @vue/test-utils 모듈을 최신버전으로 설치하는 코드인데 현재 내가 사용하고 있는 Vue 버전은 2.714이다. 현재 사용하는 vue 버전과 @vue/test-utils의 최신버전의 종속성의 문제가 있기에 설치가 안 되는 중이다.

—force를 사용해서 강제로 설치하는 방법이 있지만 Vue 버전2와 오류가 생기지 않는 버전을 설치해보자

PS C:\repository\NTT_Frontend_Vue> npm install --save-dev @vue/test-utils@^1.0.3
>> 

added 24 packages, and audited 1275 packages in 2s

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
JavaScript
복사

설치 완료

다시 한번 테스트를 돌려보자

PS C:\repository\NTT_Frontend_Vue> npm run test
   
> frontend@0.1.0 test
> jest

 FAIL  tests/unit/TestExampleFrom.test.js
  ● Test suite failed to run

    Cannot find module '@/components/TestExampleForm.vue' from 'tests/unit/TestExampleFrom.test.js'

      1 | import { shallowMount } from '@vue/test-utils';
    > 2 | import TestExampleForm from '@/components/TestExampleForm.vue';
        | ^
      3 |
      4 | describe('TestExampleForm', () => {
      5 |   it('renders a "Hi" message', () => {

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.require (tests/unit/TestExampleFrom.test.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.708 s
Ran all test suites.
JavaScript
복사

씨발 두번째 import 구문이 문제가 되는것 같다.

example.spec.js

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

describe('TestExampleForm', () => {
  it('renders a "Hi" message', () => {
    const wrapper = shallowMount(TestExampleForm);
    expect(wrapper.text()).toContain('Hi');
  });
});
JavaScript
복사

PS C:\repository\NTT_Frontend_Vue> npm run test

> frontend@0.1.0 test
> jest

 FAIL  tests/unit/example.spec.js
  ● Test suite failed to run

    Cannot find module '../../src/components/TestExampleForm' from 'tests/unit/example.spec.js'

    However, Jest was able to find:
        '../../src/components/TestExampleForm.vue'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'mjs', 'cjs', 'jsx', 'ts', 'tsx', 'json', 'node'].

    See https://jestjs.io/docs/configuration#modulefileextensions-arraystring

      1 | import { shallowMount } from '@vue/test-utils';        
    > 2 | import TestExampleForm from '../../src/components/TestExampleForm';
        | ^
      3 |
      4 | describe('TestExampleForm', () => {
      5 |   it('renders a "Hi" message', () => {

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.require (tests/unit/example.spec.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.413 s
Ran all test suites.
JavaScript
복사

.vue 파일 확장자를 가지지 않으면 못 찾는것 같다.

PS C:\repository\NTT_Frontend_Vue> npm run test

> frontend@0.1.0 test
> jest

 FAIL  tests/unit/example.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript    
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    C:\repository\NTT_Frontend_Vue\src\components\TestExampleForm.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<template>
                                                                                      ^

    SyntaxError: Unexpected token '<'

      1 | import { shallowMount } from '@vue/test-utils';
    > 2 | import TestExampleForm from '../../src/components/TestExampleForm.vue';
        | ^
      3 |
      4 | describe('TestExampleForm', () => {
      5 |   it('renders a "Hi" message', () => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
      at Object.require (tests/unit/example.spec.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.742 s
Ran all test suites.
JavaScript
복사

웹서핑을 해보니 jest.config.js를 생성하고 코드를 작성해야 한다고 한다.

루트 디렉토리에 jest.config.js를 생성한뒤 코드를 작성해보자

const path = require('path');

module.exports = {
  // ...other Jest configuration options...
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};
JavaScript
복사

example.spec.js

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

describe('TestExampleForm', () => {
  it('renders a "Hi" message', () => {
    const wrapper = shallowMount(TestExampleForm);
    expect(wrapper.text()).toContain('Hi');
  });
});
JavaScript
복사

테스트 결과

PS C:\repository\NTT_Frontend_Vue> npm run test

> frontend@0.1.0 test
> jest

 FAIL  tests/unit/example.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when 
Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers. 

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.  
     • If you need a custom transformation specify a "transform" 
option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    C:\repository\NTT_Frontend_Vue\src\components\TestExampleForm.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<template>

                     ^

    SyntaxError: Unexpected token '<'

      1 | import { shallowMount } from '@vue/test-utils';        
    > 2 | import TestExampleForm from '@/components/TestExampleForm.vue';
        | ^
      3 |
      4 | describe('TestExampleForm', () => {
      5 |   it('renders a "Hi" message', () => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
      at Object.require (tests/unit/example.spec.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.367 s
Ran all test suites
JavaScript
복사

에러 원인

해결 방법

add : CI구성용 추가 설치 및 테스트 코드 작성 [NTT-Front-04]

이제 git에서도 CI가 동작해야한다.