Snapshot Testing

μŠ€λƒ…μƒ·(Snapshot Testing) ν…ŒμŠ€νŒ…μ„ ν•˜κΈ° μœ„ν•΄ λ¨Όμ € μ•„λž˜ ν™˜κ²½μ„ κ΅¬μ„±ν•©λ‹ˆλ‹€.

npm install --save-dev jest-serializer-vue
// package.json
{
  // ...
  "jest": {
    // ...
    // serializer for snapshots
    "snapshotSerializers": [
      "jest-serializer-vue"
    ]
  }
}

그리고 μ½”λ“œλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

import { mount } from '@vue/test-utils';
import HelloWorld from '../HelloWorld.vue';

describe('Hello World Component', () => {
  test('[Snapshot Testing] renders hello world message', () => {
    const { vm } = mount(HelloWorld);
    expect(vm.$el).toMatchSnapshot();
  });
});

μœ„ μ½”λ“œλ₯Ό μ‹€ν–‰ν•  λ•Œ 주의 할점은 λͺ…λ Ήμ–΄λ₯Ό npm t -u둜 ν•΄μ•Ό ν•œλ‹€λŠ” μ μž…λ‹ˆλ‹€.