React 테스트는 스냅 샷이 아닌 스크린 샷입니다.

React 테스트를 작성하고 있습니까?
스냅샷 테스트가 일반적이지만, GitHub의 PullRequest에서는 아무리 차이를 알기 어렵습니다. 만약 스크린샷을 자동적으로 찍어 차분을 이미지 파일로서 비교할 수 있으면 좋겠다고 생각했더니 좋을 것 같은 패키지를 발견했습니다. react-screenshot-test 라는 패키지입니다만, 다음과 같이 차분을 이미지 파일로서 확인할 수 있는 훌륭한 툴입니다.



조속히 시도해 봅시다. 우선 설치에서

$ yarn add -D react-screenshot-test

그런 다음 구성 파일을 만듭니다.

jest.screenshot.config.js

module.exports = {
  testEnvironment: "node",
  globalSetup: "react-screenshot-test/global-setup",
  globalTeardown: "react-screenshot-test/global-teardown",
  testMatch: ["**/?(*.)+(screenshot).[jt]s?(x)"],
  transform: {
    "^.+\\.[t|j]sx?$": "babel-jest", // or ts-jest
    "^.+\\.css$": "react-screenshot-test/css-transform",
    "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "react-screenshot-test/asset-transform"
  }
};

babel을 사용하기 때문에 다음 파일도 준비해 둡니다. 덧붙여서 이번에 작성한 샘플 어플리케이션은 create-react-app를 사용하고 있습니다.

babel.config.js

module.exports = {
  presets: ["babel-preset-react-app"]
};

스냅샷을 만드는 코드는 이런 식으로 보입니다. 데스크탑과 iPhoneX 각각의 경우에 스크린샷을 찍습니다.

App.screenshot.jsx

import React from "react";
import { ReactScreenshotTest } from "react-screenshot-test";
import "./index.css";
import App from "./App";

ReactScreenshotTest.create("App")
  .viewport("Desktop", {
    width: 1024,
    height: 768
  })
  .viewport("iPhone X", {
    width: 375,
    height: 812,
    deviceScaleFactor: 3,
    isMobile: true,
    hasTouch: true,
    isLandscape: false
  })
  .shoot("app", <App />)
  .run();

그리고는 다음의 커멘드를 실행해 작성하는 것 같습니다. npm 스크립트에 등록해 둡시다.

$ jest -c jest.screenshot.config.js -u

실행할 때 다음 오류가 발생했습니다. 분명히 필요한 docker 이미지가있는 것 같습니다.

$ yarn test:screenshot
yarn run v1.21.1
$ jest -c jest.screenshot.config.js -u
Error: It looks like you're missing the Docker image required to render screenshots.

Please run the following command:

$ docker pull fwouts/chrome-screenshot:1.0.0


    at ensureDockerImagePresent (/Users/daisuke/work/react/screenshot.lesson/node_modules/react-screenshot-test/dist/lib/screenshot-server/DockerizedScreenshotServer.js:50:15)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async DockerizedScreenshotServer.start (/Users/daisuke/work/react/screenshot.lesson/node_modules/react-screenshot-test/dist/lib/screenshot-server/DockerizedScreenshotServer.js:28:9)
    at async setUpScreenshotServer (/Users/daisuke/work/react/screenshot.lesson/node_modules/react-screenshot-test/dist/lib/global-setup.js:26:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

docker 이미지를 풀고 나서 다시 시도합니다.

$ yarn test:screenshot
yarn run v1.21.1
$ jest -c jest.screenshot.config.js -u
 PASS  src/App.screenshot.jsx (7.325s)
  App
    Desktop
      ✓ app (643ms)
    iPhone X
      ✓ app (680ms)

 › 2 snapshots written.
Snapshot Summary
 › 2 snapshots written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   2 written, 2 total
Time:        7.384s
Ran all test suites.
✨  Done in 9.85s.

할 수 있었습니다. 제대로 데스크톱과 iPhoneX의 2 종류의 스크린 샷을 얻을 수 있어요.



꽤 깊은 파고들 수 있는 좋은 도구를 찾아 버렸다. 우선은 서둘러 적어둔다.