이 글은 Storybook, Cypress와 Jest 코드 커버율을 결합시키는 과정을 소개하고 왜 이러는지 설명한다.전체 코드는 available on GitHub입니다.

코드 덮어쓰기

어떤 형식의 테스트가 코드 라이브러리의 몇 부분과 어떤 부분을 덮어쓰는지 이해하면 미래의 테스트 작업을 지도하는 데 도움이 될 것이다.Codecovcaninform reviewers whether a pull request would increase or decrease overall test coverage 등 도구를 사용하여 심사위원에게 새로운 기능을 추가하거나 버그를 복구할 때 적절한 테스트를 작성했는지 확인하라고 알립니다.
단, 각각의 테스트가 서로 다른 시스템에서 실행될 수 있기 때문에, 하나의 테스트 유형의 코드 덮어쓰기 지표만으로는 충분한 정보를 제공할 수 없습니다.

테스트 유형

올바른 테스트 유형 선택은 테스트 중인 코드 유형에 따라 다릅니다.
라우터로 구성되어 API에 연결된 코드는 사용CypressSelenium과 같이 API를 시뮬레이션하거나 사전 녹화한 통합 테스트를 통해 테스트하는 것이 좋습니다.
실용 프로그램 코드, 예를 들어 문자열 포맷 프로그램, 정규 표현식과 일부React 연결이나 구성 요소는 단원 테스트를 통해 실현하는 것이 가장 좋다. 예를 들어 사용Jest,React Testing Library이다.
벙어리 구성 요소와 스타일, 예를 들어 의미 표시나 CSS, CSS 파일, CSSINJ의 React 구성 요소를 제공하는 데 주로 사용되며, 예를 들어 사용Storybook과 Chromatic 조합을 사용하는 것이 가장 좋다.

배치

예제 응용 프로그램은 다음과 같습니다.

신청

**/*.spec.js(통합 테스트)

**/styles/*.stories.js(시각 회귀 테스트)

**/styles/*.js(디자인 시스템에 속하지 않는 스타일)

**/*.test.js(유닛 테스트)

**/*.js(신청 코드)

공용사업

**/*.test.js(유닛 테스트)

**/*.js(공용사업 코드)

설계 시스템

**/*.stories.js(시각 회귀 테스트)

**/*.js(디자인 시스템 코드)

이 모드에서는 다음과 같은 대상 코드 오버레이율 지표를 설정해야 할 수 있습니다.

utilities 단원 테스트

에 100% 포함

design-system 100% 시각 회귀 테스트

에 포함

application 분할:

**/styles/*.js 시각 회귀 테스트

에서 XX% 이상 덮어쓰기

유닛 또는 통합 테스트

는 XX% 이상의 기타 코드를 덮어씁니다.

모든 유형의 테스트

는 90% 이상의 코드를 덮어씁니다.
그러나 우리는 어떻게 이런 지표를 얻습니까?우리는 어떻게 전체적인 커버 가치를 얻습니까?

샘플 설정

다음과 같은 예제 항목을 만들었습니다.

Cypress의 통합 테스트 코드 커버율 지표

Jest의 유닛 테스트 코드 범위 지표

시각 회귀 테스트 이야기책의 코드 커버율 지표

상기 3개의 커버율 보고서와 결합하여 전체 코드 커버율

을 표시한다.
https://github.com/penx/storybook-code-coverage

통합 테스트

create react 응용 프로그램에서 Cypress 테스트의 코드 덮어쓰기를 가져오려면 다음 라이브러리가 필요합니다.

@cypress/instrument-cra 응용 프로그램에 명령 삽입

@cypress/code-coverage 보고서 결과

기본 구성 및 테스트가 포함된 Cypress 프로젝트를 구축하기 위해 @bahmutov/cly를 사용하고 다음 블로그 게시물을 참조했습니다.

https://www.cypress.io/blog/2019/05/13/code-create-react-app-v3-and-its-cypress-tests-using-typescript/

https://www.cypress.io/blog/2019/09/05/cypress-code-coverage-for-create-react-app-v3/

@cypress/code coverage 설정 지침에 따라 다음을 수행합니다.

Add to your cypress/support/index.js file
import '@cypress/code-coverage/support'

Register tasks in your cypress/plugins/index.js file
require('@cypress/code-coverage/task')(on, config)

Cypress 테스트를 실행할 때 응용 프로그램을 자동으로 시작하기 위해 다음 라이브러리를 사용했습니다.

start-server-and-test

@cypress/instrumentcra는 웹 패키지에서 불러오지 않은 파일의 메타데이터를 수집하지 않습니다.Cypress 테스트를 실행하기 전에, 나는 가짜 테스트를 실행해서 .nyc_output/out.json 에서 초기 파일을 만들어서 이 문제를 해결했다.
"fake"라는 파일의 프로젝트 루트에 가짜 테스트를 추가했습니다.테스트js':

it("shall pass", () => {});

다음 (약간 복잡한) "coverage:init"테스트에서 이 테스트를 사용했습니다.이것은create react 응용 프로그램의 코드 덮어쓰기 스크립트를 실행할 수 있지만, 덮어쓰기가 0이면 json 파일을 생성합니다. 코드 덮어쓰기 메타데이터를 포함하고 실제 덮어쓰기가 없습니다.솔직히 더 깔끔한 방법이 있을 수도 있어요.
다음 뉴욕 주 설정이 패키지에 추가되었습니다.json:

  "nyc": {
    "report-dir": "coverage/integration",
    "reporter": ["text", "json", "lcov"],
    "all": true,
    "include": [
      "src/**/*.js"
    ],
    "exclude": [
      "**/*.test.js",
      "**/test.js",
      "**/*.stories.js",
      "**/stories.js"
    ]
  },

및 다음 스크립트(기본 시작 스크립트의 변경 사항에 유의):

    "start": "react-scripts -r @cypress/instrument-cra start",
    "coverage:init": "react-scripts test --watchAll=false --coverage --coverageDirectory=.nyc_output --roots=\"<rootDir>\" --testMatch=\"<rootDir>/fake.test.js\" --coverageReporters=json && mv .nyc_output/coverage-final.json .nyc_output/out.json",
    "test:integration": "cypress run",
    "coverage:integration": "start-server-and-test 3000 test:integration",

결과는 다음과 같습니다.

그리고 나는 coverage/integration/lcov-report/index.html에서 lcov 보고서를 열어 이 지표들을 더욱 상세하게 이해할 수 있다.

src/application/app를 찾습니다.보고서에서 무시되지 않은 나뭇가지(노란색)와 선(빨간색)을 볼 수 있습니다.

시각 회귀 테스트

스토리북에서 코드 덮어쓰기를 추출하기 위해 저는 @storybook/addon-storyshotsJest 스냅샷을 생성합니다.기존 스냅샷과 비교하지 않고 매번 스냅샷을 생성합니다.변경 사항을 추적하는 데 사용되지 않으며, 덮어쓰기 확률을 수집하는 농담일 뿐입니다.
Storyshots는 문서의 설명에 따라 설정된 것이며, 또한 "renderOnly"를 사용하여 스냅샷을 디스크에 저장하지 않습니다../storyshots/index.js:

import initStoryshots, {renderOnly} from '@storybook/addon-storyshots';

initStoryshots({test: renderOnly});

다음 스크립트는 가방에 추가됩니다.json:

    "coverage:visual-regression": "react-scripts test --watchAll=false --coverage --coverageDirectory=coverage/visual-regression --roots=\"<rootDir>\" --testMatch=\"<rootDir>/storyshots/index.js\"",

이 스크립트를 실행하면 다음과 같은 내용이 표시됩니다.

마찬가지로 저는 lcov 보고서(coverage/visual regression/lcov report/index.html)를 보면 더 자세한 정보를 얻을 수 있습니다.

단원 테스트

이것은 상당히 간단합니다. 주로create react 응용 프로그램이 제공하는 기존 기능을 사용하기 때문입니다. 비록 현재 bug in [email protected] that prevents this from working 버전이 하나 있지만 3.4.0을 꾸준히 사용하는 것이 좋습니다.
약간의 조정이 필요합니다.

create react 프로그램에서 가방에 추가해서 기사를 수집하지 말라고 알려 줍니다.json:

  "jest": {
    "collectCoverageFrom": [
      "src/**/*.js",
      "!**/*.test.js",
      "!**/test.js",
      "!**/*.stories.js",
      "!**/stories.js"
    ]
  },

react 스크립트를 사용하여 모든 파일의 덮어쓰기를 수집하는 스크립트를 만듭니다.

{
    "coverage:unit": "react-scripts test --watchAll=false --coverage --coverageDirectory=coverage/unit",
}

이 스크립트를 실행하면 다음과 같은 내용이 표시됩니다.

병합

나는 Codecov 을 사용하자고 제안했다. merge reports for you 과 post metrics as a comment on pull requests. 그러나 이 예에서, 나는 로컬에서 실행할 수 있는 것을 찾아서 조합 보고서를 만들고 있다.
나는 istanbul merge를 사용하여 조합 보고서를 만들었고 가방에 다음 스크립트를 사용했다.json:

    "coverage": "yarn coverage:clean && yarn coverage:init && yarn coverage:integration && yarn coverage:unit && yarn coverage:visual-regression && yarn coverage:merge && yarn coverage:merge-report",
    "coverage:clean": "rm -rf .nyc_output && rm -rf coverage",
    "coverage:merge": "istanbul-merge --out coverage/merged/coverage-final.json ./coverage/unit/coverage-final.json  ./coverage/visual-regression/coverage-final.json ./coverage/integration/coverage-final.json",
    "coverage:merge-report": "nyc report --reporter=lcov --reporter=text --temp-dir=./coverage/merged --report-dir=./coverage/merged"

yarn coverage를 실행할 때 나는 지금 상술한 모든 내용과 아래의 합병 보고서를 받았다.

이제 나는 이 보고서를 가지고 관심 분야를 찾을 수 있게 되었다.
예를 들어 이상하게도 모든 단원 테스트, 시각화 회귀 테스트와 단원 테스트를 실행했지만 Global Styles에 대해 100% 덮어쓰지 않았다.
나는 lcov 보고서를 깊이 읽고 원인을 찾아낼 수 있다.

난 어둠 모드의 테스트가 없어!😢