เขียน Unit Test บน Vue.js (เวอร์ชั่น พยายามเขียนง่ายๆ)

วันก่อน นั่งหาวิธีทำ Testing บน Vue.js แต่พยายามหา Blog อ่านง่ายๆ ทั้งไทยทั้ง อังกฤษ แต่ก็ไม่เจอซักที เจอแต่ Doc กับ เว็บที่อ่านงงๆ (จริงอยู่ที่มันไม่ได้ยากมากนะแต่มันทำได้ง่ายกว่านี้) เลยอยากเขียนวิธีที่โคตรง่ายเลยแบบทำตามแค่ 1–10 แล้วจบ

1. Setup Project

ขั้นแรกเราจะง่ายขึ้น ถ้าใช้ vue-cli และในบทความนี้เราจะใช้ vue-cli เป็นหลัก เริ่มต้นด้วยการ Set option ตอน create ตามนี้

หลักๆอยู่ที่ Karma + Mocha แต่ถ้าใครจะเอา e2e ด้วยก็ เลือก Yes อันที่สองด้วย

Setup unit tests with Karma + Mocha? Yes
Setup e2e tests with Nightwatch? Yes

2. เริ่ม เขียน Test

เริ่มเขียน Unit Test ซึ่งเป็นการเทสว่า method ทำงานถูกต้องมั้ย และ component render ถูกต้องมั้ย ซึ่งเราก็ต้องไปเขียนใน folder test/unit/spec ที่ Vue.js เตรียมเอาไว้ให้โดย Vue.js ก็ฝังตัว Karma + Mocha มาไว้ให้แล้ว…. ซึ่งการเทสในแต่ละ ส่วนก็ต่างกันออกไปโดยขั้นแรกเราต้องสร้าง file spec ก่อน

3. สร้าง File spec

เวลาสร้าง file spec เราต้อง import vuejs และ component ที่เราจะใช้เข้ามาก่อน โดยหน้าตาจะประมาณนี้ ซึ่งแนะนำว่าให้ตั้งชื่อเป็นประมาณนี้ ComponentA.spec.js

https://gist.github.com/thangman22/ec3a4cb6d5dc293337639d0dc91365e7

4. Test Method ต่างๆก่อน Mount

ถ้าเราต้องเทส method หรือ data ก่อน mount ซึ่งเราทำได้ง่ายมากๆครับ เพราะว่าตัว component ของ Vue.js เป็น Javascript ธรรมดาอยู่แล้ว ซึ่งเราสามารถเรียก property หรือ method นั้นตรงๆได้เลยครับแบบนี้ครับ

https://gist.github.com/thangman22/abd687b9154ae1e9f7f4ba31de5f605a

5. Test ตอนที่ component นั้น mount ไปแล้ว

ในบางครั้งเราต้องให้ component นั้น render เสร็จเราถึงจะ Test ได้ (ซึ่งจริงๆก็เกือบทุกครั้งนั่นแหละ) ซึ่งเราต้องให้ component mount ก่อนด้วยการเรียก method $mount() ซึ่งถ้าต้องการใส่ prop เข้าไปด้วยก็ใส่ แบบในตัวอย่างได้เลย

const Constructor = Vue.extend(Component)

const vm = new Constructor({propsData: {prop: 1}}).$mount()

แล้วเราก็สามารถเรียกใช้ method ที่ปกติอยู่ใน vm ของ Vue.js ได้เลย โดยถ้าต้องการ เทส element หรือ text ก็ต้อง getElement หรือ textContent ก่อน แต่ถ้าต้องการเทส method ก็สามารถ vm แล้ว . ด้วยชื่อ method ได้เลยแบบด้านล่าง

https://gist.github.com/thangman22/511d153c87c4e002780ed8e7341a8524

6. Run test

อันนี้ง่ายเลยครับ ไปที่ Application Directory แล้วสั่ง cmd ข้างล่างนี้แล้วจบเลยครับ

npm run unit

คือ จริงๆตัว Doc ของ Vue.js ก็อธิบายไว้ค่อนข้างดีแล้วแต่ผมคิดว่ามันเขียนให้งงได้น้อยกว่านั้นเยอะเลย ซึ่งจริงๆแล้วมีการเทส e2e ที่เอาไว้เทสทั้ง app อีก อันนั้นผมจะมาอธบายอี Blog นึ่ง สำหรับบางคนอาจจะไม่ถนัดภาษาอังกฤษก็ลองอ่านจากอันนี้ก็ได้ครับ