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 플래그를 사용하여 지워지지 않습니다. 오래된 스냅샷을 제거하도록 설정할 수 있는 환경 변수가 있지만 이 유틸리티는 주의해서 사용해야 합니다.

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


  • 좋은 웹페이지 즐겨찾기