JestとPuppeteerでE2Eテストができるのは便利ですが、HTMLの差分検知したいだけの時などにスナップショットテストが欲しくなります。

ということでやってみました。

サンプルコード

page.$().getProperty('outerHTML')のように書くことでHTMLが主時できます。innerHTMLやinnerTextとかでもいけますが、その辺は自分の目的と好みで選びましょう。

const shouldMatchOuterHTMLSnapshot = async (selector) => {
  // Find element
  const elementHandle = await page.$(selector);

  // Get outer HTML
  const jsHandle = await elementHandle.getProperty('outerHTML');

  // To JSON
  const json = await jsHandle.jsonValue();

  // Test it
  expect(json).toMatchSnapshot()
}

describe('test', () => {
  beforeAll(async () => {
      await page.goto('http://localhost:3000');
    });
    
    afterAll(async done => {
      done();
    });
    
    it('should match snapshot [body]', async () => {
      await shouldMatchOuterHTMLSnapshot('#root')
    });

    it('should match snapshot [Login form]', async () => {
      await shouldMatchOuterHTMLSnapshot('[data-test="login.form"]')
    });
})

このテストを動かすと、それぞれ指定したセレクタ以下のHTMLが記録されます。

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`test should match snapshot [body] 1`] = `"<div id=\"root\"><div class=\"amplify-container\">

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`should match snapshot [Login form] 1`] = `"<form data-test=\"login.form\" class=\"ui fo

HTML変更の検知

スナップショットを作成してしまえば、あとは変更されたときにJestが検知してくれます。

reg suitなどを使って画像で差分を調べるということもやってみたいとは思いますが、まずはこれくらいの差分検知をはじめるところからでもよいでしょう。