ในบทความนี้ ผมจะแนะนำให้คุณรู้จักกับเครื่องมือทดสอบ React ชื่อ Jest พร้อมกับไลบรารี่ยอดนิยม Enzyme ซึ่งออกแบบมาเพื่อทดสอบส่วนประกอบ React ฉันจะแนะนำเทคนิคการทดสอบ Jest ให้คุณรู้จัก ซึ่งรวมถึง: การรันการทดสอบ การทดสอบส่วนประกอบ React การทดสอบสแนปชอต และการเยาะเย้ย หากคุณยังใหม่ต่อการทดสอบและสงสัยว่าจะเริ่มต้นอย่างไร คุณจะพบว่าบทช่วยสอนนี้มีประโยชน์เพราะเราจะเริ่มต้นด้วยบทนำเกี่ยวกับการทดสอบ ในตอนท้าย คุณจะพร้อมสำหรับการทดสอบแอปพลิเคชัน React โดยใช้ Jest และ Enzyme คุณควรจะคุ้นเคยกับ React เพื่อทำตามบทช่วยสอนนี้

บทนำสู่การทดสอบโดยย่อ

การทดสอบเป็นการทบทวนทีละบรรทัดว่าโค้ดของคุณจะดำเนินการอย่างไร ชุดการทดสอบสำหรับแอปพลิเคชันประกอบด้วยโค้ดหลายบิตเพื่อตรวจสอบว่าแอปพลิเคชันดำเนินการได้สำเร็จและปราศจากข้อผิดพลาด การทดสอบยังมีประโยชน์เมื่อมีการอัปเดตโค้ด หลังจากอัปเดตโค้ดบางส่วน คุณสามารถเรียกใช้การทดสอบเพื่อให้แน่ใจว่าการอัปเดตจะไม่ทำให้ฟังก์ชันที่มีอยู่ในแอปพลิเคชันเสียหาย

ทำไมต้องทดสอบ?

เป็นการดีที่จะเข้าใจว่าทำไมเราจึงทำอะไรบางอย่างก่อนทำ เหตุใดจึงต้องทดสอบ และจุดประสงค์ของมันคืออะไร?

1. จุดประสงค์แรกของการทดสอบคือเพื่อป้องกันการถดถอย การถดถอยคือการปรากฏขึ้นอีกครั้งของจุดบกพร่องที่ได้รับการแก้ไขก่อนหน้านี้ ทำให้คุณลักษณะหยุดทำงานตามที่ตั้งใจไว้หลังจากเกิดเหตุการณ์บางอย่างขึ้น
2. การทดสอบช่วยให้มั่นใจถึงการทำงานของส่วนประกอบที่ซับซ้อนและแอปพลิเคชันแบบแยกส่วน
3. จำเป็นต้องมีการทดสอบเพื่อให้ซอฟต์แวร์แอปพลิเคชั่นหรือผลิตภัณฑ์ทำงานได้อย่างมีประสิทธิภาพ

การทดสอบทำให้แอปมีประสิทธิภาพมากขึ้นและมีแนวโน้มที่จะเกิดข้อผิดพลาดน้อยลง เป็นวิธีการตรวจสอบว่าโค้ดของคุณทำงานตามที่คุณต้องการและแอปของคุณทำงานตามที่ตั้งใจไว้สำหรับผู้ใช้ของคุณ

มาดูประเภทของการทดสอบและสิ่งที่พวกเขาทำกัน

การทดสอบหน่วย

ในการทดสอบประเภทนี้ แต่ละหน่วยหรือส่วนประกอบของซอฟต์แวร์จะได้รับการทดสอบ หน่วยอาจเป็นแต่ละฟังก์ชัน วิธีการ ขั้นตอน โมดูล หรืออ็อบเจ็กต์ การทดสอบหน่วยแยกส่วนของรหัสและยืนยันความถูกต้อง เพื่อที่จะตรวจสอบว่ารหัสของซอฟต์แวร์แต่ละหน่วยทำงานตามที่คาดไว้

ในการทดสอบหน่วย ขั้นตอนหรือฟังก์ชันแต่ละรายการจะได้รับการทดสอบเพื่อรับประกันว่าทำงานได้อย่างถูกต้อง และส่วนประกอบทั้งหมดจะได้รับการทดสอบแยกกัน ตัวอย่างเช่น การทดสอบฟังก์ชันหรือว่าคำสั่งหรือลูปในโปรแกรมทำงานอย่างถูกต้องหรือไม่ จะอยู่ภายใต้ขอบเขตของการทดสอบหน่วย

การทดสอบส่วนประกอบ

การทดสอบส่วนประกอบจะตรวจสอบการทำงานของแต่ละส่วนของแอปพลิเคชัน การทดสอบจะดำเนินการกับแต่ละส่วนประกอบโดยแยกจากส่วนประกอบอื่นๆ โดยทั่วไป แอปพลิเคชัน React ประกอบด้วยส่วนประกอบหลายอย่าง ดังนั้นการทดสอบส่วนประกอบจึงเกี่ยวข้องกับการทดสอบส่วนประกอบเหล่านี้ทีละส่วน

ตัวอย่างเช่น พิจารณาเว็บไซต์ที่มีหน้าเว็บต่างๆ ที่มีองค์ประกอบหลายอย่าง ทุกองค์ประกอบจะมีองค์ประกอบย่อยของตัวเอง การทดสอบแต่ละโมดูลโดยไม่พิจารณาการรวมเข้ากับส่วนประกอบอื่นๆ จะเรียกว่าการทดสอบส่วนประกอบ

การทดสอบแบบนี้ใน React ต้องใช้เครื่องมือที่ซับซ้อนกว่านี้ ดังนั้น เราจึงต้องการ Jest และเครื่องมือที่ซับซ้อนกว่าในบางครั้ง เช่น Enzyme ซึ่งเราจะพูดคุยกันสั้นๆ ในภายหลัง

การทดสอบสแนปชอต

การทดสอบสแนปชอตช่วยให้แน่ใจว่าส่วนต่อประสานผู้ใช้ (UI) ของเว็บแอปพลิเคชันจะไม่เปลี่ยนแปลงโดยไม่คาดคิด โดยจะจับโค้ดของส่วนประกอบในช่วงเวลาหนึ่ง เพื่อให้เราสามารถเปรียบเทียบส่วนประกอบในสถานะหนึ่งกับสถานะอื่นๆ ที่เป็นไปได้ที่อาจต้องใช้

เราจะเรียนรู้เกี่ยวกับการทดสอบสแนปชอตในหัวข้อต่อไป

ข้อดีและข้อเสียของการทดสอบ

การทดสอบเป็นสิ่งที่ดีและควรทำ แต่ก็มีข้อดีและข้อเสีย

ข้อดี

1. มันป้องกันการถดถอยที่ไม่คาดคิด
2. ช่วยให้นักพัฒนาสามารถมุ่งเน้นไปที่งานปัจจุบัน แทนที่จะกังวลเกี่ยวกับอดีต
3. อนุญาตให้สร้างโมดูลของแอปพลิเคชันที่อาจซับซ้อนเกินกว่าจะสร้างได้
4. ช่วยลดความจำเป็นในการตรวจสอบด้วยตนเอง
   

ข้อเสีย

1. คุณต้องเขียนโค้ดเพิ่มเติม รวมทั้งแก้ไขจุดบกพร่องและบำรุงรักษา
2. ความล้มเหลวในการทดสอบที่ไม่สำคัญอาจทำให้แอปถูกปฏิเสธในแง่ของการรวมอย่างต่อเนื่อง

บทนำสู่เรื่องตลก

Jest เป็นเฟรมเวิร์กการทดสอบ JavaScript ที่น่าพึงพอใจโดยเน้นที่ความเรียบง่าย สามารถติดตั้งได้ด้วย npm หรือ Yarn Jest เหมาะสมกับประเภทสาธารณูปโภคที่กว้างกว่าที่เรียกว่านักวิ่งทดสอบ มันใช้งานได้ดีสำหรับแอปพลิเคชัน React แต่ก็ใช้งานได้ดีนอกแอปพลิเคชัน React

เอ็นไซม์เป็นห้องสมุดที่ใช้ทดสอบแอพพลิเคชั่นของ React ออกแบบมาเพื่อทดสอบส่วนประกอบ และทำให้สามารถเขียนคำยืนยันที่จำลองการดำเนินการที่ยืนยันว่า UI ทำงานอย่างถูกต้องหรือไม่

Jest และ Enzyme ช่วยเติมเต็มซึ่งกันและกัน ดังนั้นในบทความนี้เราจะใช้ทั้งสองอย่าง

ขั้นตอนการทำการทดสอบด้วย Jest

ในส่วนนี้ เราจะติดตั้ง Jest และเขียนการทดสอบ หากคุณยังใหม่ต่อ React ฉันขอแนะนำให้ใช้ Create React App เพราะมันพร้อมใช้งานและมาพร้อมกับ Jest

 npm init react-app my-app

เราจำเป็นต้องติดตั้ง Enzyme **** และ enzyme-adapter-react-16 ด้วย react-test-renderer (ตัวเลขควรขึ้นอยู่กับรุ่นของ React ที่คุณใช้อยู่)

 npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer

ตอนนี้เราสร้างโปรเจ็กต์ด้วย Jest และ Enzyme แล้ว เราต้องสร้างไฟล์ setupTest.js ในโฟลเดอร์ src ของโปรเจ็กต์ ไฟล์ควรมีลักษณะดังนี้:

 import { configure } from "enzyme"; import Adapter from "enzyme-adapter-react-16"; configure({ adapter: new Adapter() });

การดำเนินการนี้จะนำเข้าเอนไซม์และตั้งค่าอะแดปเตอร์เพื่อเรียกใช้การทดสอบของเรา

ก่อนดำเนินการต่อ เรามาเรียนรู้พื้นฐานกันก่อน บทความนี้มีการใช้สิ่งสำคัญบางอย่างเป็นอย่างมาก และคุณจำเป็นต้องเข้าใจสิ่งเหล่านี้

• it หรือ test คุณจะส่งผ่านฟังก์ชันไปยังวิธีนี้ และตัวดำเนินการทดสอบจะเรียกใช้ฟังก์ชันนั้นเป็นบล็อกของการทดสอบ
• describe วิธีการทางเลือกนี้สำหรับการจัดกลุ่มจำนวนเท่าใด it หรือคำสั่ง test
• expect นี่เป็นเงื่อนไขที่การทดสอบจะต้องผ่าน มันเปรียบเทียบพารามิเตอร์ที่ได้รับกับตัวจับคู่ นอกจากนี้ยังให้คุณเข้าถึงตัวจับคู่จำนวนหนึ่งที่ให้คุณตรวจสอบความถูกต้องของสิ่งต่าง ๆ ได้ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในเอกสารประกอบ
• mount นต์ เมธอดนี้แสดง DOM แบบเต็ม รวมถึงองค์ประกอบย่อยขององค์ประกอบหลัก ซึ่งเรากำลังเรียกใช้การทดสอบ
• shallow สิ่งนี้แสดงเฉพาะส่วนประกอบแต่ละอย่างที่เรากำลังทดสอบ มันไม่ได้แสดงส่วนประกอบย่อย ซึ่งช่วยให้เราสามารถทดสอบส่วนประกอบแบบแยกส่วนได้

การสร้างไฟล์ทดสอบ

Jest รู้ได้อย่างไรว่าไฟล์ทดสอบคืออะไรและไม่ใช่ไฟล์อะไร กฎข้อแรกคือไฟล์ใด ๆ ที่พบในไดเร็กทอรีใด ๆ ที่มีชื่อ __test__ ถือเป็นการทดสอบ หากคุณใส่ไฟล์ JavaScript ไว้ในโฟลเดอร์ใดโฟลเดอร์หนึ่ง Jest จะพยายามเรียกใช้เมื่อคุณเรียก Jest ว่าดีขึ้นหรือแย่ลง กฎข้อที่สองคือ Jest จะรู้จักไฟล์ใดๆ ที่มีคำต่อท้าย . .spec.js หรือ . .test.js มันจะค้นหาชื่อโฟลเดอร์ทั้งหมดและไฟล์ทั้งหมดในที่เก็บของคุณทั้งหมด

มาสร้างการทดสอบครั้งแรกของเราสำหรับ React mini-application ที่สร้างขึ้นสำหรับบทช่วยสอนนี้ คุณสามารถโคลนมันบน GitHub รัน npm install เพื่อติดตั้งแพ็คเกจทั้งหมด จากนั้น npm start เปิดแอป ตรวจสอบไฟล์ README.md สำหรับข้อมูลเพิ่มเติม

มาเปิด App.test.js เพื่อเขียนการทดสอบครั้งแรกของเรา ขั้นแรก ตรวจสอบว่าองค์ประกอบแอปของเราแสดงผลอย่างถูกต้องหรือไม่ และเราได้ระบุผลลัพธ์หรือไม่:

 it("renders without crashing", () => { shallow(<App />); }); it("renders Account header", () => { const wrapper = shallow(<App />); const welcome = <h1>Display Active Users Account Details</h1>; expect(wrapper.contains(welcome)).toEqual(true); });

ในการทดสอบด้านบน การทดสอบครั้งแรกแบบ shallow จะตรวจสอบเพื่อดูว่าองค์ประกอบแอปของเราแสดงผลอย่างถูกต้องโดยไม่ขัดข้องหรือไม่ โปรดจำไว้ว่าวิธีการ shallow จะแสดงเพียงองค์ประกอบเดียว โดยไม่มีองค์ประกอบย่อย

การทดสอบที่สองตรวจสอบว่าเราได้ระบุเอาต์พุตแท็ก h1 ของ "แสดงบัญชีผู้ใช้ที่ใช้งานอยู่" ในองค์ประกอบแอปของเราหรือไม่ โดยมีตัวจับคู่ Jest ของ toEqual

ตอนนี้ ทำการทดสอบ:

 npm run test /* OR */ npm test

เอาต์พุตในเทอร์มินัลของคุณควรมีลักษณะดังนี้:

 PASS src/App.test.js √ renders without crashing (34ms) √ renders Account header (13ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 11.239s, estimated 16s Ran all test suites related to changed files. Watch Usage: Press w to show more.

อย่างที่คุณเห็น การทดสอบของเราผ่าน มันแสดงให้เห็นว่าเรามีชุดทดสอบหนึ่งชุดชื่อ App.test.js โดยมีการทดสอบที่ประสบความสำเร็จสองครั้งเมื่อ Jest รัน เราจะพูดถึงการทดสอบสแนปชอตในภายหลัง และคุณยังจะได้เห็นตัวอย่างการทดสอบที่ล้มเหลวอีกด้วย

ข้ามหรือแยกการทดสอบ

การข้ามหรือแยกการทดสอบหมายความว่าเมื่อ Jest รัน การทดสอบที่ทำเครื่องหมายไว้โดยเฉพาะจะไม่ทำงาน

 it.skip("renders without crashing", () => { shallow(<App />); }); it("renders Account header", () => { const wrapper = shallow(<App />); const header = <h1>Display Active Users Account Details</h1>; expect(wrapper.contains(header)).toEqual(true); });

การทดสอบครั้งแรกของเราจะถูกข้ามเนื่องจากเราใช้วิธีการ skip เพื่อแยกการทดสอบ ดังนั้น มันจะไม่ทำงานหรือทำการเปลี่ยนแปลงใดๆ กับการทดสอบของเราเมื่อ Jest ทำงาน เฉพาะอันที่สองเท่านั้นที่จะทำงาน คุณยังสามารถใช้ it.only()

การเปลี่ยนแปลงในไฟล์ทดสอบค่อนข้างน่าหงุดหงิด จากนั้นต้องรัน npm test ด้วยตนเองอีกครั้ง Jest มีคุณสมบัติที่ดีที่เรียกว่าโหมดนาฬิกา ซึ่งจะคอยดูการเปลี่ยนแปลงไฟล์และทำการทดสอบตามนั้น หากต้องการเรียกใช้ Jest ในโหมดนาฬิกา คุณสามารถเรียกใช้ npm test -- --watch หรือ jest --watch ฉันยังขอแนะนำให้ปล่อยให้ Jest ทำงานในหน้าต่างเทอร์มินัลตลอดช่วงที่เหลือของบทช่วยสอนนี้

ฟังก์ชั่นเยาะเย้ย

การเยาะเย้ยเป็นการทำซ้ำที่น่าเชื่อถือของวัตถุหรือโมดูลโดยไม่มีการทำงานภายในที่แท้จริง มันอาจมีฟังก์ชั่นเล็กน้อย แต่เมื่อเปรียบเทียบกับของจริงแล้ว มันเป็นเรื่องล้อเลียน สามารถสร้างโดยอัตโนมัติโดย Jest หรือด้วยตนเอง

ทำไมเราต้องเยาะเย้ย? การเยาะเย้ยลดจำนวนการพึ่งพา นั่นคือจำนวนไฟล์ที่เกี่ยวข้องที่ต้องโหลดและแยกวิเคราะห์เมื่อทำการทดสอบ ดังนั้น การใช้แบบจำลองจำนวนมากทำให้การทดสอบดำเนินการได้รวดเร็วยิ่งขึ้น

ฟังก์ชันจำลองเรียกอีกอย่างว่า "สายลับ" เพราะมันช่วยให้คุณสอดแนมพฤติกรรมของฟังก์ชันที่ถูกเรียกโดยโค้ดอื่นโดยตรง แทนที่จะทดสอบเฉพาะเอาต์พุตเท่านั้น

มีสองวิธีในการเยาะเย้ยฟังก์ชัน: โดยการสร้างฟังก์ชันจำลองเพื่อใช้ในโค้ดทดสอบ หรือโดยการเขียนการจำลองด้วยตนเองเพื่อแทนที่การขึ้นต่อกันของโมดูล

การจำลองแบบแมนนวล **** ใช้เพื่อขัดขวางการทำงานด้วยข้อมูลจำลอง ตัวอย่างเช่น แทนที่จะเข้าถึงทรัพยากรระยะไกล เช่น เว็บไซต์หรือฐานข้อมูล คุณอาจต้องการสร้างการจำลองแบบแมนนวลที่ช่วยให้คุณใช้ข้อมูลปลอมได้

เราจะใช้ฟังก์ชันจำลองในหัวข้อถัดไป

การทดสอบส่วนประกอบปฏิกิริยา

ส่วนนี้จะรวมความรู้ทั้งหมดที่เราได้รับมาในการทำความเข้าใจวิธีทดสอบส่วนประกอบ React การทดสอบเกี่ยวข้องกับการทำให้แน่ใจว่าผลลัพธ์ของส่วนประกอบไม่ได้เปลี่ยนเป็นอย่างอื่นโดยไม่คาดคิด การสร้างส่วนประกอบอย่างถูกวิธีเป็นวิธีที่มีประสิทธิภาพมากที่สุดเพื่อให้แน่ใจว่าการทดสอบจะประสบความสำเร็จ

สิ่งหนึ่งที่เราทำได้คือการทดสอบอุปกรณ์ประกอบฉาก — โดยเฉพาะอย่างยิ่ง การทดสอบว่าอุปกรณ์ประกอบฉากจากองค์ประกอบหนึ่งถูกส่งไปยังอีกส่วนประกอบหนึ่งหรือไม่ Jest และ Enzyme API ช่วยให้เราสร้างฟังก์ชันจำลองเพื่อจำลองว่าอุปกรณ์ถูกส่งผ่านระหว่างส่วนประกอบหรือไม่

เราต้องส่งอุปกรณ์ประกอบบัญชีผู้ใช้จากส่วนประกอบหลักของ App ไปยังส่วนประกอบ Account เราจำเป็นต้องให้รายละเอียดบัญชีผู้ใช้กับ Account เพื่อแสดงบัญชีที่ใช้งานอยู่ของผู้ใช้ นี่คือจุดที่การเยาะเย้ยมีประโยชน์ ทำให้เราสามารถทดสอบส่วนประกอบของเราด้วยข้อมูลปลอม

มาสร้างแบบจำลองสำหรับอุปกรณ์ประกอบฉาก user :

 const user = { name: "Adeneye David", email: "[email protected]", username: "Dave", };

เราได้สร้างฟังก์ชันการจำลองแบบแมนนวลในไฟล์ทดสอบของเราและล้อมรอบส่วนประกอบต่างๆ สมมติว่าเรากำลังทดสอบฐานข้อมูลขนาดใหญ่ของผู้ใช้ ไม่แนะนำให้เข้าถึงฐานข้อมูลโดยตรงจากไฟล์ทดสอบของเรา แต่เราสร้างฟังก์ชันจำลอง ซึ่งช่วยให้เราใช้ข้อมูลปลอมเพื่อทดสอบส่วนประกอบของเรา

 describe(" ", () => { it("accepts user account props", () => { const wrapper = mount(<Account user={user} />); expect(wrapper.props().user).toEqual(user); }); it("contains users account email", () => { const wrapper = mount(<Account user={user} />); const value = wrapper.find("p").text(); expect(value).toEqual("[email protected]"); }); }); describe(" ", () => { it("accepts user account props", () => { const wrapper = mount(<Account user={user} />); expect(wrapper.props().user).toEqual(user); }); it("contains users account email", () => { const wrapper = mount(<Account user={user} />); const value = wrapper.find("p").text(); expect(value).toEqual("[email protected]"); }); });

เรามีการทดสอบสองรายการข้างต้น และเราใช้เลเยอร์ describe ซึ่งจะทดสอบส่วนประกอบ โดยการระบุอุปกรณ์ประกอบฉากและค่าที่เราคาดว่าจะผ่านการทดสอบ เราก็สามารถดำเนินการต่อได้

ในการทดสอบครั้งแรก เราตรวจสอบว่าอุปกรณ์ประกอบฉากที่เราส่งผ่านไปยังส่วนประกอบที่ติดตั้งนั้นเท่ากับอุปกรณ์ประกอบฉากจำลองที่เราสร้างขึ้นด้านบนหรือไม่

สำหรับการทดสอบครั้งที่สอง เราส่งอุปกรณ์ประกอบฉากผู้ใช้ไปยังองค์ประกอบ Account ที่ติดตั้ง จากนั้น เราตรวจสอบว่าเราสามารถหาองค์ประกอบ <p> ที่ตรงกับสิ่งที่เรามีในองค์ประกอบ Account ได้หรือไม่ เมื่อเราเรียกใช้ชุดทดสอบ คุณจะเห็นว่าการทดสอบทำงานสำเร็จ

เรายังสามารถทดสอบสถานะของส่วนประกอบของเราได้อีกด้วย มาตรวจสอบว่าสถานะของข้อความแสดงข้อผิดพลาดมีค่าเท่ากับ null หรือไม่:

 it("renders correctly with no error message", () => { const wrapper = mount( ); expect(wrapper.state("error")).toEqual(null); }); it("renders correctly with no error message", () => { const wrapper = mount( ); expect(wrapper.state("error")).toEqual(null); });

ในการทดสอบนี้ เราตรวจสอบว่าสถานะของข้อผิดพลาดคอมโพเนนต์ของเรามีค่าเท่ากับ null หรือไม่ โดยใช้ตัวจับคู่ toEqual() หากมีข้อความแสดงข้อผิดพลาดในแอปของเรา การทดสอบจะล้มเหลวเมื่อเรียกใช้

ในหัวข้อถัดไป เราจะพูดถึงวิธีทดสอบส่วนประกอบ React ด้วยการทดสอบสแนปชอต ซึ่งเป็นเทคนิคที่น่าทึ่งอีกวิธีหนึ่ง

การทดสอบสแนปชอต

การทดสอบสแนปชอตจะบันทึกโค้ดของส่วนประกอบในช่วงเวลาหนึ่ง เพื่อเปรียบเทียบกับไฟล์สแนปชอตอ้างอิงที่จัดเก็บไว้ในการทดสอบ ใช้เพื่อติดตามการเปลี่ยนแปลงใน UI ของแอป

การแสดงรหัสจริงของสแน็ปช็อตคือไฟล์ JSON และ JSON นี้มีบันทึกว่าส่วนประกอบมีลักษณะอย่างไรเมื่อสร้างสแน็ปช็อต ระหว่างการทดสอบ Jest จะเปรียบเทียบเนื้อหาของไฟล์ JSON นี้กับผลลัพธ์ของส่วนประกอบระหว่างการทดสอบ หากตรงกัน การทดสอบจะผ่านไป หากไม่เป็นเช่นนั้น การทดสอบจะล้มเหลว

ในการแปลงเอ็นไซม์ wrapper ให้อยู่ในรูปแบบที่เข้ากันได้กับการทดสอบสแนปชอตของ Jest เราต้องติดตั้ง enzyme-to-json :

 npm install --save-dev enzyme-to-json

มาสร้างการทดสอบสแนปชอตของเรากัน เมื่อเราเรียกใช้ในครั้งแรก สแน็ปช็อตของโค้ดของคอมโพเนนต์นั้นจะถูกประกอบและบันทึกในโฟลเดอร์ __snapshots__ ใหม่ในไดเร็กทอรี src

 it("renders correctly", () => { const tree = shallow(<App />); expect(toJson(tree)).toMatchSnapshot(); });

เมื่อการทดสอบข้างต้นทำงานสำเร็จ ส่วนประกอบ UI ปัจจุบันจะถูกเปรียบเทียบกับส่วนประกอบที่มีอยู่

ตอนนี้ มาทำการทดสอบกัน:

 npm run test

เมื่อชุดทดสอบทำงาน จะมีการสร้างสแน็ปช็อตใหม่และบันทึกลงในโฟลเดอร์ __snapshots__ เมื่อเราเรียกใช้การทดสอบในภายหลัง Jest จะตรวจสอบว่าส่วนประกอบตรงกับสแน็ปช็อตหรือไม่

ตามที่อธิบายไว้ในส่วนก่อนหน้านี้ วิธีการ shallow จากแพ็คเกจเอนไซม์นั้นใช้เพื่อแสดงผลส่วนประกอบเดียวและไม่ใช้อย่างอื่น มันไม่แสดงส่วนประกอบย่อย แต่มันทำให้เรามีวิธีที่ดีในการแยกโค้ดและรับข้อมูลที่ดีขึ้นเมื่อทำการดีบั๊ก อีกวิธีหนึ่งที่ชื่อว่า mount ใช้เพื่อแสดง DOM แบบเต็ม รวมถึงองค์ประกอบลูกขององค์ประกอบหลัก ซึ่งเรากำลังเรียกใช้การทดสอบ

นอกจากนี้เรายังสามารถอัปเดตสแนปชอตของเรา มาทำการเปลี่ยนแปลงองค์ประกอบของเรากันเพื่อให้การทดสอบล้มเหลว ซึ่งจะเกิดขึ้นเนื่องจากส่วนประกอบไม่สอดคล้องกับสิ่งที่เรามีในไฟล์สแน็ปช็อตอีกต่อไป ในการดำเนินการนี้ ให้เปลี่ยนแท็ก <h3> ในคอมโพเนนต์ของเราจาก <h3> Loading...</h3> เป็น <h3>Fetching Users...</h3> เมื่อการทดสอบรัน นี่คือสิ่งที่เราได้รับในเทอร์มินัล:

 FAIL src/App.test.js (30.696s) × renders correctly (44ms) ● renders correctly expect(received).toMatchSnapshot() Snapshot name: `renders correctly 1 - Snapshot + Received FAIL src/App.test.js (30.696s) × renders correctly (44ms) ● renders correctly expect(received).toMatchSnapshot() Snapshot name: `renders correctly 1 - Snapshot + Received

          แสดงรายละเอียดบัญชีผู้ใช้ที่ใช้งานอยู่
        
        

    - กำลังโหลด...
    + กำลังดึงผู้ใช้...
        
      

       7 | it("แสดงผลอย่างถูกต้อง", ()
=> {
       8 | เครื่องห่อ const = ตื้น ( );
    > 9 | คาดหวัง (toJson(wrapper)).toMatchSnapshot();
         | ^ 10 | });
      11 |
      12 | /* it("แสดงผลโดยไม่หยุดทำงาน", () => {

      ที่วัตถุ (src/App.test.js:9:27)

 › 1 สแน็ปช็อตล้มเหลว
สรุปภาพรวม
 › 1 สแน็ปช็อตล้มเหลวจาก 1 ชุดทดสอบ ตรวจสอบการเปลี่ยนแปลงรหัสของคุณหรือกด `u` เพื่ออัปเดต

ชุดทดสอบ: 1 ล้มเหลว, ทั้งหมด 1 รายการ
การทดสอบ: 1 ล้มเหลว, 1 ทั้งหมด
สแนปชอต: 1 ล้มเหลว, ทั้งหมด 1 รายการ
เวลา: 92.274s
รันชุดทดสอบทั้งหมดที่เกี่ยวข้องกับไฟล์ที่เปลี่ยนแปลง

ดูการใช้งาน: กด w เพื่อแสดงเพิ่มเติม

หากเราต้องการให้การทดสอบของเราผ่าน เราจะเปลี่ยนการทดสอบเป็นสถานะก่อนหน้าหรืออัปเดตไฟล์สแน็ปช็อต ในบรรทัดคำสั่ง Jest จะให้คำแนะนำเกี่ยวกับวิธีอัปเดตสแน็ปช็อต ขั้นแรก กด w ในบรรทัดคำสั่งเพื่อแสดงเพิ่มเติม จากนั้นกด u เพื่ออัปเดตสแนปชอต

 › Press u to update failing snapshots.

เมื่อเรากด u เพื่ออัปเดตสแน็ปช็อต การทดสอบจะผ่านไป

บทสรุป

ฉันหวังว่าคุณจะสนุกกับการทำงานในบทช่วยสอนนี้ เราได้เรียนรู้เทคนิคการทดสอบ Jest โดยใช้ไลบรารีการทดสอบเอนไซม์ ฉันยังได้แนะนำคุณเกี่ยวกับขั้นตอนการทดสอบ การทดสอบส่วนประกอบ React การเยาะเย้ย และการทดสอบสแนปชอต หากคุณมีคำถามใดๆ คุณสามารถทิ้งคำถามไว้ในส่วนความคิดเห็นด้านล่าง เรายินดีที่จะตอบทุกคำถามและแก้ไขปัญหาต่างๆ กับคุณ

แหล่งข้อมูลและการอ่านเพิ่มเติม

• เอกสารตลก
• เอกสารเกี่ยวกับเอนไซม์
• “วิธีทดสอบส่วนประกอบปฏิกิริยา: คู่มือฉบับสมบูรณ์”, Mohammad Iqbal, freeCodeCamp
• “การทดสอบปฏิกิริยากับความตลกขบขันและเอนไซม์”, Dominic Fraser, CodeClan