프로젝트 컨텍스트

제가 진행하고 있는 프로젝트가 곧 2년이 됩니다. 우리는 2018년 10월에 작업을 시작했습니다. 이에 대한 단일 테스트는 없습니다. 서로 다른 시간에 적어도 12명 이상의 사람들이 이 프로젝트에 참여했습니다. 현재 우리는 이 애플리케이션 내부의 기능을 연구하는 세 개의 다른 팀이 있습니다. 우리가 가지고 있는 것은 재난의 비결입니다.

Homeday의 다른 프로젝트에서는 단위 테스트를 위해 다음 테스트 스택을 사용합니다.

- 농담 . Jest는 배터리 포함 단위 테스트 솔루션 제공을 목표로 Facebook에서 개발한 테스트 실행기입니다.

-unit -jest Vue CLI 플러그인 . Unit -jest 플러그인은 Vue CLI 에서 제공하는 핵심 플러그인의 일부입니다 . Vue 핵심 팀이 이를 유지 관리합니다.

- Vue 테스트 유틸리티 . Vue Test Utils는 Vue.js의 공식 테스트 라이브러리입니다. Vue 핵심 팀도 이를 유지 관리하며 Vue.js 구성 요소 테스트를 단순화하기 위한 유틸리티 기능 세트입니다. 이는 격리된 방식으로 Vue 구성 요소를 마운트하고 상호 작용하는 몇 가지 방법을 제공합니다.

이는 훌륭한 지원과 문서를 갖춘 놀라운 라이브러리입니다. 우리는 그들과 함께 있어야 합니다. 그렇죠? 글쎄요, 그러기 위해서는 더 나은 것이 없는지 알아보기 위해 다른 것이 무엇인지 살펴봐야 할 것입니다.

VueJS용 테스트 도구 개요

테스팅 라이브러리는 지난 몇 년 동안 어느 정도 주목을 받아왔습니다. React 커뮤니티 의 기본 권장 사항이 되었다는 점을 보면 그 관련성이 특히 분명해집니다 .

테스트 라이브러리 의 창시자 는 Javascript 애플리케이션 테스트를 더욱 쉽게 만드는 데 헌신한 엔지니어 인 Kent C. Dodds 입니다 . 그는 JS 애플리케이션 테스트를 이해하는 데 도움이 되는 환상적인 코스를 제공합니다.

Kent는 사용 가능한 네 가지 종류의 자동화 테스트를 언급합니다 .

• 정적 . 코드가 작성되는 동안 오타와 유형 오류를 잡아보세요.
• 단위 . 개별 부품과 분리된 부품이 예상대로 작동하는지 확인합니다.
• 통합 . 여러 장치가 조화롭게 함께 작동하는지 확인하십시오.
• 엔드투엔드(e2e) . 사용자처럼 행동하여 앱 주위를 클릭하고 앱이 올바르게 작동하는지 확인하는 도우미 로봇입니다.

이제 vue-testing-library 에 대해 이야기해 보겠습니다 . 공식 저장소에 따르면 DOM 테스트 라이브러리 및 @vue/test-utils 위에 구축된 경량 어댑터입니다 . 그리고 공식적인 권장 사항은 jest-dom을 설치하여 사용자 정의 Jest matcher를 사용하는 것 입니다 .

내부적으로 vue-testing-library는 Homeday에서 이미 사용하고 있는 것과 거의 동일한 기술 스택을 유지합니다. 그렇다면 차이점은 무엇입니까? 주요 차이점은 테스트 라이브러리 지침 원칙 에 따라 다릅니다 .

테스트가 소프트웨어 사용 방식과 유사할수록 더 많은 신뢰를 얻을 수 있습니다 .

결과적으로 라이브러리는 웹 페이지가 사용되는 방식과 매우 유사한 테스트를 작성하도록 권장하는 메서드와 유틸리티만 노출합니다.

프로젝트를 위한 vue-testing-library 설정

이제 손을 더럽힐 시간입니다. 기사의 이 부분은 매우 기술적이지만 테스트 환경을 설정하는 데 따른 어려움을 단계별로 설명하려고 노력할 것입니다.

vue-testing-library 와 테스트를 구성하는 데 필요한 나머지 종속성을 설치해 보겠습니다 .

npm i --save-dev @testing-library/vue @testing-library/jest-dom jest vue-jest babel-jest babel-core@bridge eslint-plugin-jest eslint-plugin-testing-library

      
Photo by Michelle Tresemer on Unsplash
      

먼저, 이 글은 에 관한 것입니다 vue-testing-library. 이것이 우리가 설치해야 할 첫 번째 종속성입니다. 문서에는 jest-dom. 처음에는 간단하고 순진한 것부터 시작할 수 있습니다.

npm i --save-dev @testing-library/vue @testing-library/jest-dom

npm i --save-dev jest

npm i --save-dev vue-jest

npm i --save-dev babel-jest

jest > 24.0.0 및 babel-jest를 사용하는 경우 babel-core@bridge를 설치하십시오.

이는 우리 프로젝트에도 적용되므로 이제 다음을 설치하겠습니다 babel-core@bridge.

npm i --save-dev babel-core@bridge

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

엄청난! 이제 첫 번째 테스트를 만들 수 있습니다! 우리는 그것들이 파일 .js과 파일 모두에서 작동하도록 만들 수 있습니다 .vue. 일반 js 함수에 대한 테스트의 최소한의 예를 보여 드리겠습니다.

예! 나는 당신이 그 단위 테스트에 뭔가 문제가 있다는 것을 언뜻 알 수 있다고 확신합니다. ESLint는 Jest 에서 오는 모든 것에 대해 불평합니다 . 글쎄, Jest 와 Testing Library를 위한 ESLint 플러그인을 설치하는 것 외에는 할 수 있는 일이 없습니다 :

npm i --save-dev eslint-plugin-jest eslint-plugin-testing-library

module.exports = {
  root: true,
  env: {
    node: true,
    'jest/globals': true,
  },
  extends: [
    'plugin:vue/recommended',
    'plugin:testing-library/vue',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
};

import '@testing-library/jest-dom';
import { render } from '@testing-library/vue';
import de from '@/lang/de.json';
import NoDealsOverlay from '@/components/NoDealsOverlay.vue';
describe('components/NoDealsOverlay', () => {
  test('Renders the title', () => {
    const { queryByText } = render(NoDealsOverlay);
    const element = queryByText(de.NO_DEALS.TITLE);
    expect(element).toBeInTheDocument();
  });
});

      
Photo by Fernando Brasil on Unsplash
      

일주일 동안 vue-testing-library를 가지고 플레이한 후 다음 사항이 분명해졌습니다.

• vue-testing-library는 통합 및 단위 테스트에 중점을 둡니다.
• 그 접근 방식은 코드베이스의 문제를 식별하는 데 도움이 될 수 있습니다.
• 테스트가 어렵다면 코드 작성 방식에 대한 위험 신호일 수 있습니다.
• 우리가 선택한 도구에 관계없이 코드베이스를 푸는 것은 어려울 것입니다.
• 이 라이브러리는 얕은 렌더링 기술을 허용하지 않으므로 homeday-blocks 의 설정보다 이 설정을 사용하는 것이 더 어려울 수 있습니다 . 이는 라이브러리의 문제가 아니라 코드베이스의 문제입니다. 리팩토링하고 더 작은 구성 요소로 분할해야 하는 몇 가지 대규모 구성 요소가 있습니다.

그것이 우리를 위해 작동하도록 하려면 다음이 필요합니다.

• Vue Router 로 설정 작업을 수행하세요 .
• Vuex 로 설정 작업을 수행하세요 .
• Travis CI 에서 설정이 실행되는지 확인하세요 .
• 코드 적용 범위를 늘리십시오.

박수를 보내거나, 댓글을 남기거나, 어디에서나 공유해 보세요. 귀하의 의견에 감사드립니다.

또한 블로그 에서 다른 기사도 확인해 보세요 . 우리는 많은 흥미로운 것들을 다루고 있습니다:

• 404 : 문제가 생겼습니다
• 디자이너와 개발자가 좋아하는 자동화된 색상 팔레트를 달성한 방법
• E2E 테스트를 수행하는 이유와 방법
• VueJS 구성 요소
• 헛소리 없는 일러스트
• VueJS 구성 요소 라이브러리: UI 구성 요소 라이브러리를 만든 이유
• 그리고 더 !