Jest-image-snapshot으로 시각적 회귀 테스트
그러나 이 문서에서는 대신 jest-image-snapshot 패키지에서 제공하는 보다 시각적인 스크린샷 비교에 중점을 둡니다.
간단한 정보들:
샘플 테스트:
이 테스트는 Jest가 설치되어 있고 기본 Jest 노하우가 있다고 가정합니다. 이 프로젝트는 Create React App을 사용하여 빌드되었습니다. 이 초기 설정 후 시각적 테스트 장점을 위해 아래 단계를 따르십시오.
npm i --save-dev jest-image-snapshot
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_
라는 이름으로 또 다른 하위 폴더가 생성됩니다.스냅샷과 참조 스냅샷의 차이점은 다음과 같이 표시됩니다.
이것은 간단한 테스트입니다. 더 복잡한 사용자 흐름을 시뮬레이션하고 전체 페이지가 아닌 페이지 섹션의 스크린샷을 찍을 수도 있습니다.
좋은 점:
다른 것들:
-u
플래그를 사용하여 지워지지 않습니다. 오래된 스냅샷을 제거하도록 설정할 수 있는 환경 변수가 있지만 이 유틸리티는 주의해서 사용해야 합니다. 시각적 테스트의 위대함을 위한 다른 경로가 있습니다.
Reference
이 문제에 관하여(Jest-image-snapshot으로 시각적 회귀 테스트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/saniadsouza/test-for-visual-regression-with-jest-image-snapshot-4i54텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)