Day 21. Snapshot Test

Snapshot Test With Jest

在之前的篇章讲过，Snapshot Test常常透过截图比对前後版本的画面来确认渲染是否正确。

而Jest本身有提供Snapshot Testing 相关的方法，比如：

expect('value').toMatchSnapshot()

也可以传递 Dom node到里面：

expect(document.querySelector('div')).toMatchSnapshot()

在Jest的Snapshot Test第一次启动时，会把目前输入expect进去的值建立一个Snapshot
，下一次执行时就会比对两次执行间的差异。

snapshot大概会长这样：

exports['some expected structure 1'] = '

    <div id="app">
        Cat
    </div> 
';

而一个范例的Snapshot Test 如下：

test('renders item correctly', () => {
    const wrapper = shallowMount(item)
    expect(wrapper.element).toMatchSnapshot()
})

Snapshot Testing For Static Component

static component 就是指不接受props也没有state，没有逻辑，永远输出同样的内容以及渲染相同的HTML内容。

假设有一个component：

<template>
  <transition>
    <svg class="spinner" width="44px" height="44px" viewBox="0 0 54 54">
      <circle class="path" fill="none" stroke-width="4" 
              stroke-linecap="round" cx="22" cy="22"   r="20">
      </circle>
    </svg>
  </transition>
</template>

对应的Test是：

test('render correctly', () => {
    expect(shallowMount(Spinner).element).toMatchSnapshot()
})

先执行一次测试，之後修改 width="50px" height="50px"。

再执行一次。

npm run test:unit -- -watch

会看到这个画面

按下i就可以进入interactive mode，你可以在这个模式下观看以及review你需要update的snapshot或是选择跳过。

参考：https://jestjs.io/docs/en/snapshot-testing

下一篇讲snapshot Test dynamic component。