Snapshot vue ด้วย jest กัน

หลังจากดู youtube งาน Vueconf ก็เลยอยากลองดูบ้าง ครั้งนี้จะโฟกัสแค่เรื่อง snapshot

ก่อนอื่นสร้างโปรเจคก่อน

$ vue init webpack snapshot-test
$ cd snapshot-test
$ npm install -D jest

เลือกไม่เอา unit test นะครับเราจะมาสร้างตรงนั้นกันเอง

สร้างไฟล์ใหม่ใน tests/components/Hello.spec.js

มาลองรัน test กันด้วย node_modules\.bin\jest

ใจเย็น ๆ นะมันต้องไป setup ให้ jest อ่านไฟล์ vue ได้ก่อน

สร้างไฟล์ใหม่ใน jest/jest-vue.js

แล้วไปอัพเดทไฟล์ package.json คนับ

ลองรันอีกทีจะเห็นว่ามีไฟล์ snapshot แล้ว

ต่อไปมาลองเทส event โดยโค้ดจาก youtube

สร้างไฟล์ src/components/ShoppingList.vue

แล้วก็ตามด้วยไฟล์ test อีกไฟล์ tests/components/ShoppingList.spec.js

จากโค้ดเราจะเทสว่าถ้าเราคลิก ปุ่มใน li อันที่ 3 มันจะต้อง snapshot html ที่คลิกแล้ว

มาลองรันเทสกันอีกทีครับ snapshot ก็จะมีhtml ชุดใหม่แล้ว

Reference

Jest for all: Episode 1 — Vue.js