VueJS(2.x) - 구성 요소 테스트 도우미 - 1부

소프트웨어 테스트는 구축 중인 응용 프로그램이 예상 요구 사항과 일치하고 결함이 없는지 확인하는 방법으로 정의할 수 있습니다.
아래 이미지와 같이 여러 유형의 소프트웨어 테스트가 있습니다.


출처: https://hackr.io/blog/types-of-software-testing

현실 세계에서 주로 엄격한 기한과 작업을 수행할 자격이 있는 사람의 부족으로 인해 프로젝트 내에서 모든 것을 구현하는 것은 상당히 어렵습니다. 그러나 VueJS 프로젝트에서 개발자가 큰 노력 없이 쉽게 구현할 수 있는 테스트 유형이 적어도 두 가지 있습니다.

Unit Testing

Component Testing

단위 테스트

단위 테스트를 사용하면 개별 코드 단위를 격리하여 테스트할 수 있습니다. 애플리케이션 안정성을 손상시키지 않고 새로운 기능을 구현하고 레거시 코드를 리팩터링할 수 있다는 확신을 개발 팀에 제공합니다.

부품 테스트

구성 요소 테스트를 통해 구성 요소가 완전히 작동하고 해당 상태를 올바르게 표시하는지 확인할 수 있습니다. 이를 가능하게 하려면 구성 요소를 DOM(virtual 또는 실제)에 마운트해야 합니다.

이 기사에서는 VueJS 구성 요소에 대한 테스트를 매우 쉽게 구현하는 데 도움이 되는 유용하고 확장 가능한 도우미를 빌드하는 방법을 보여 드리겠습니다.

새 VueJS 프로젝트 만들기

Vue CLI을 사용하여 새 VueJS 프로젝트를 만들고 Manually select features 옵션을 선택한 후 다음 옵션을 선택합니다.

바벨

린터/포매터

단위 테스트

2.x 및 Jest 단계에서 각각 Vue Version 및 Pick unit test solution를 선택합니다.

프로젝트가 생성된 후 프로젝트에 다음 개발 종속 항목을 설치합니다.

Vue Testing Library

yarn add -D @testing-library/vue

구성 요소 테스트 도우미 빌드

이제 test.js 폴더 내에 /src/utils라는 새 파일을 만들고 Vue 클래스를 인스턴스화하고 구성 요소를 렌더링하는 데 도움이 되는 함수를 가져옵니다.

import { createLocalVue } from '@vue/test-utils'
import { render } from '@testing-library/vue'

const localVue = createLocalVue()

그런 다음 Vue 테스트 라이브러리customRender 함수를 호출하고 각 테스트에 필요한 사용자 지정 옵션과 함께 전달하는render 함수를 만들고 내보냅니다. 이 기사 ;):

export const customRender = (component, options = {}) =>
  render(
    component,
      {
        localVue,
        ...options
      }
   )

마지막 단계는 localVue 에서 모든 항목을 내보내는 것입니다. 꼭 필요한 것은 아니지만 테스트 파일에 @testing-library/vue 한 줄만 유지하는 데 도움이 되며 필요한 경우 나중에 테스트 프레임워크/라이브러리도 쉽게 변경해야 하는 경우에 도움이 될 수 있습니다. .

export * from '@testing-library/vue'

이는 구성 요소에 대한 간단한 테스트를 구현하기에 충분합니다.

간단한 컴포넌트 생성

주어진 상태에 따라 컬러 레이블을 표시하는 역할을 하는 이 간단한 구성 요소를 살펴보겠습니다.

<template>
  <span data-testid="status-label" :class="label.color">
    {{ label.text }}
  </span>
</template>

import { STATUS } from "@/constants";

export default {
  name: "Status",
  props: ["status"],
  computed: {
    label() {
      const color = `Status__${this.status}`;

      if (this.status === STATUS.ERROR) {
        return {
          text: "Finished with errors",
          color,
        };
      } else if (this.status === STATUS.WARNING) {
        return {
          text: "Finished with warnings",
          color,
        };
      } else if (this.status === STATUS.SUCCESS) {
        return {
          text: "Finished",
          color,
        };
      }

      return {
        text: "Invalid Status",
        color: null,
      };
    },
  },
};

<style lang="css" scoped>
.Status__error {
  color: red;
}
.Status__warning {
  color: orange;
}
.Status__success {
  color: green;
}
</style>

템플릿의 import 특성을 확인합니다. 요소를 식별하고 테스트하기 쉽도록 구성 요소 범위 내에서 요소별로 고유data-testid를 결정하는 것이 좋습니다.

테스트 구현

이제 Jest 과 함께 테스트 도우미를 사용하여 구성 요소가 data-testids prop 값에 따라 적절한 텍스트와 색상을 표시하는지 확인하는 간단한 테스트 슈트를 만들어 보겠습니다.

import "@testing-library/jest-dom/extend-expect";
import { customRender } from "@/utils/test";
import Status from "@/components/Status";

describe("Status", () => {
  it('should display a red label "Finished with errors" if status is equal to "error"', () => {
    const { getByTestId } = customRender(Status, {
      props: { status: "error" },
    });

    const statusLabel = getByTestId("status-label");
    expect(statusLabel).toHaveClass("Status__error");
    expect(statusLabel).toHaveTextContent("Finished with errors");
  });

  it('should display an orange label "Finished with warnings" if status is equal to "warning"', () => {
    const { getByTestId } = customRender(Status, {
      props: { status: "warning" },
    });

    const statusLabel = getByTestId("status-label");

    expect(statusLabel).toHaveClass("Status__warning");
    expect(statusLabel).toHaveTextContent("Finished with warnings");
  });

  it('should display a green label "Finished" if status is equal to "success"', () => {
    const { getByTestId } = customRender(Status, {
      props: { status: "success" },
    });

    const statusLabel = getByTestId("status-label");

    expect(statusLabel).toHaveClass("Status__success");
    expect(statusLabel).toHaveTextContent("Finished");
  });
});

꽤 쉬웠죠?!
this link에서 이 도우미를 구현하는 작업 프로젝트의 전체 소스 코드를 찾을 수 있습니다.

곧 이 도우미를 개선하고 Vuex 또는 Vue I18n 과 같은 외부 종속성이 있는 구성 요소를 테스트할 수 있도록 사용자 지정 가능하게 만드는 이 기사의 두 번째 부분을 게시할 예정입니다.

나는 당신이 그것을 좋아 바랍니다!
많은 공유와 댓글 부탁드립니다...

Matthew Waring의 표지 이미지