Jest-image-snapshot으로 시각적 회귀 테스트

Jest에는 React 트리에 대한 직렬화 가능한 값이 생성된 다음 차이점을 확인하기 위해 참조 스냅샷과 비교되는 스냅샷 테스트라는 기능이 있습니다.

그러나 이 문서에서는 대신 jest-image-snapshot 패키지에서 제공하는 보다 시각적인 스크린샷 비교에 중점을 둡니다.

간단한 정보들:

픽셀매치를 사용하여 이미지 비교를 수행하는 Jest 매처입니다

.

jest-image-snapshot은 Jest 20.x.x 이하에서는 작동하지 않습니다.

노이즈에 가우시안 블러를 추가할 수 있음

스냅샷이 생성되면 Jest 스냅샷과 정확히 동일하게 작동합니다

.

샘플 테스트:

이 테스트는 Jest가 설치되어 있고 기본 Jest 노하우가 있다고 가정합니다. 이 프로젝트는 Create React App을 사용하여 빌드되었습니다. 이 초기 설정 후 시각적 테스트 장점을 위해 아래 단계를 따르십시오.

패키지를 설치합니다.

npm i --save-dev jest-image-snapshot

사용자 상호 작용을 위해 Puppeteer도 설치합니다.

npm install puppeteer

테스트 스크립트:

import { toMatchImageSnapshot } from 'jest-image-snapshot';
const puppeteer = require('puppeteer');
expect.extend({ toMatchImageSnapshot });


it('CreateReactApp home', async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('http://localhost:3000');
    const image = await page.screenshot();

    expect(image).toMatchImageSnapshot();
})

테스트를 처음 실행합니다.

npm run test

이 테스트는 localhost에서 실행 중인 페이지를 열고 스냅샷을 찍어 폴더_image_snapshots_에 저장합니다.




스크린샷:

소스 코드를 변경하고 테스트를 다시 실행하십시오.
이번에는 테스트가 실패합니다.

_diff_output_라는 이름으로 또 다른 하위 폴더가 생성됩니다.



스냅샷과 참조 스냅샷의 차이점은 다음과 같이 표시됩니다.



이것은 간단한 테스트입니다. 더 복잡한 사용자 흐름을 시뮬레이션하고 전체 페이지가 아닌 페이지 섹션의 스크린샷을 찍을 수도 있습니다.

좋은 점:

Jest가 설치되면 간편한 설정

테스트의 Jest 스캐폴딩을 따르고 기존 기능 테스트

와 쉽게 통합할 수 있습니다.

API의 여러 구성 옵션

이미지 차이 감도 백분율을 설정할 수 있음

다른 것들:

Typescript를 지원하지 않음

오래된 참조 스냅샷은 수동으로 제거해야 하며 Jest의 -u 플래그를 사용하여 지워지지 않습니다. 오래된 스냅샷을 제거하도록 설정할 수 있는 환경 변수가 있지만 이 유틸리티는 주의해서 사용해야 합니다.

시각적 테스트의 위대함을 위한 다른 경로가 있습니다.