วิธีตั้งค่า Jest สำหรับการทดสอบปฏิกิริยา

เมื่อนักพัฒนาจำนวนมากขึ้นเลือกใช้ React เป็นเฟรมเวิร์กส่วนหน้าที่พวกเขาเลือก มันจึงมีความสำคัญมากขึ้นเรื่อยๆ เพื่อให้แน่ใจว่าโค้ดที่เราเขียนนั้นมีคุณภาพสูงสุด สิ่งสำคัญอย่างหนึ่งของการประกันคุณภาพคือการทดสอบ และ Jest เป็นกรอบการทดสอบยอดนิยมที่มักใช้กับ React

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

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

Jest สำหรับการทดสอบปฏิกิริยา

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

นี่คือคุณสมบัติบางอย่างที่ทำให้ Jest เป็นตัวเลือกยอดนิยมสำหรับการทดสอบแอปพลิเคชัน React:

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

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

iii) ความครอบคลุมของรหัส: Jest จัดทำรายงานความครอบคลุมของรหัสที่แสดงเปอร์เซ็นต์ของรหัสที่ครอบคลุมโดยการทดสอบของคุณ สิ่งนี้มีประโยชน์สำหรับการระบุส่วนของโค้ดของคุณที่ยังไม่ผ่านการทดสอบและอาจต้องให้ความสนใจเพิ่มเติม

iv) การทดสอบแบบอะซิงโครนัส: Jest ทำให้การทดสอบโค้ดแบบอะซิงโครนัสเป็นเรื่องง่ายโดยจัดเตรียมยูทิลิตี้สำหรับจัดการโค้ดแบบอะซิงโครนัส สิ่งนี้ทำให้คุณสามารถเขียนการทดสอบที่รอคำสัญญาหรือรหัส async อื่น ๆ เพื่อแก้ไขก่อนที่จะทำการยืนยัน

v) ติดตั้งง่าย: Jest ติดตั้งและกำหนดค่าได้ง่ายสำหรับแอปพลิเคชัน React ของคุณ มันมาพร้อมกับการกำหนดค่าเริ่มต้นที่ทำงานนอกกรอบ แต่สามารถปรับแต่งให้เหมาะกับความต้องการเฉพาะของคุณได้

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

การตั้งค่า Jest สำหรับการทดสอบปฏิกิริยา

มีขั้นตอนบางอย่างที่คุณต้องปฏิบัติตามเพื่อตั้งค่า Jest สำหรับการทดสอบ React ในปี 2023

1) ติดตั้ง Jest

Jest สามารถติดตั้งในโครงการของคุณโดยใช้ npm หรือเส้นด้าย นี่คือขั้นตอนในการติดตั้ง Jest โดยใช้ npm:

i) เปิดเทอร์มินัลหรือพรอมต์คำสั่งแล้วไปที่ไดเร็กทอรีโครงการของคุณ

ii) เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้ง Jest เป็นการอ้างอิงการพัฒนาในโครงการของคุณ:

การติดตั้ง npm –save-dev ล้อเล่น

คำสั่งนี้จะติดตั้ง Jest และเพิ่มลงในไฟล์ package.json ของโปรเจ็กต์ในส่วน devDependencies

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

แค่นั้นแหละ! ตอนนี้คุณได้ติดตั้ง Jest ในโครงการของคุณแล้วและสามารถเริ่มเขียนแบบทดสอบสำหรับแอปพลิเคชันของคุณได้

2) สร้างไฟล์กำหนดค่า

หากต้องการสร้างไฟล์การกำหนดค่าสำหรับ Jest คุณสามารถสร้างไฟล์ชื่อ jest.config.js ในไดเร็กทอรีรากของโปรเจ็กต์ ไฟล์นี้จะมีตัวเลือกการกำหนดค่าที่ Jest ควรใช้เมื่อเรียกใช้การทดสอบ

นี่คือตัวอย่างไฟล์การกำหนดค่า:

โมดูลส่งออก = {

// ระบุประเภทไฟล์ที่ควรพิจารณาเป็นไฟล์ทดสอบ

ทดสอบการจับคู่: [

'**/__tests__/**/*.js?(x)',

'**/?(*.)+(spec|test).js?(x)'

]

// รายการพาธไปยังไดเร็กทอรีที่ Jest ควรใช้เพื่อค้นหาไฟล์

ราก: ['<rootDir>/src'],

// แผนที่จากนิพจน์ทั่วไปไปยังเส้นทางไปยังหม้อแปลง

แปลง: {

'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'

},

// รูปแบบลูกโลกที่ Jest ใช้ในการตรวจหาไฟล์ทดสอบ

testPathIgnorePatterns: [

'<rootDir>/node_modules/',

'<rootDir>/สร้าง/'

]

// รายชื่อผู้รายงานที่ Jest ใช้เมื่อเขียนรายงานความครอบคลุม

coverageReporters: ['json', 'ข้อความ', 'html'],

// อาร์เรย์ของนามสกุลไฟล์ที่โมดูลของคุณใช้

moduleFileExtensions: ['js', 'json', 'jsx']

};

ไฟล์คอนฟิกูเรชันตัวอย่างนี้ระบุอ็อพชันต่อไปนี้:

a) testMatch: ระบุรูปแบบที่ใช้ในการระบุไฟล์ทดสอบ

b) ราก: ระบุไดเร็กทอรีที่ Jest ควรค้นหาไฟล์

c) การแปลง: ระบุการแปลง Jest ควรใช้กับไฟล์ก่อนรันการทดสอบ

d) testPathIgnorePatterns: ระบุรูปแบบที่จะละเว้นเมื่อค้นหาไฟล์ทดสอบ

e) coverageReporters: ระบุผู้รายงานที่ Jest ควรใช้เพื่อสร้างรายงานความครอบคลุม

f) moduleFileExtensions: ระบุนามสกุลไฟล์ที่ Jest ควรมองหาเมื่อค้นหาไฟล์

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

3) เขียนแบบทดสอบของคุณ

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

i) สร้างไฟล์ใหม่ที่มีนามสกุล .test.js หรือ .spec.js นี่จะเป็นไฟล์ทดสอบของคุณ

ii) ในไฟล์ทดสอบ ให้นำเข้าส่วนประกอบหรือฟังก์ชันที่คุณต้องการทดสอบ:

นำเข้า { ผลรวม } จาก './myFunctions';

iii) เขียนแบบทดสอบของคุณ การทดสอบเป็นฟังก์ชันที่ใช้ Jest API เพื่อตรวจสอบว่าส่วนประกอบหรือฟังก์ชันทำงานตามที่คาดไว้:

อธิบาย ('ผลรวม', () => {

test('บวก 1 + 2 เท่ากับ 3', () => {

คาดหวัง(ผลรวม(1, 2)).จะเป็น(3);

});

});

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

iv) เรียกใช้การทดสอบของคุณโดยดำเนินการคำสั่งทดสอบ npm ในไดเร็กทอรีโครงการของคุณ Jest จะค้นหาไฟล์ทดสอบในโครงการของคุณและทำการทดสอบที่พบ

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

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

4) เรียกใช้การทดสอบของคุณ

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

เมื่อคุณเรียกใช้การทดสอบ npm Jest จะแสดงผลการทดสอบของคุณในคอนโซล หากผ่านการทดสอบทั้งหมด Jest จะแสดงผลสรุปการทดสอบ:

ผ่าน src/components/Example.test.js

✓ แสดงผลโดยไม่เกิดข้อผิดพลาด (21ms)

ชุดทดสอบ: ผ่านไป 1 รายการ รวม 1 รายการ

การทดสอบ: ผ่านไปแล้ว 1 รายการ รวม 1 รายการ

ภาพรวม: ทั้งหมด 0 รายการ

เวลา: 3.204 วินาที ประมาณ 4 วินาที

รันชุดทดสอบทั้งหมด

หากการทดสอบใดล้มเหลว Jest จะแสดงข้อความแสดงข้อผิดพลาดที่อธิบายความล้มเหลวและตำแหน่งของการทดสอบที่ล้มเหลว:

ล้มเหลว src/components/Example.test.js

• ตัวอย่างส่วนประกอบ › เรนเดอร์โดยไม่แครช

TypeError: ไม่สามารถอ่านคุณสมบัติ 'แผนที่' ที่ไม่ได้กำหนด

10 | แสดงผล () {

11 | const { รายการ } = this.props;

> 12 | ส่งคืน items.map(item => <div key={item.id}>{item.name}</div>);

| ^

13 | }

14 | }

15 |

ที่ Example.render (src/components/Example.js:12:17)

ที่ ReactTestRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)

ที่ Object.<anonymous> (src/components/Example.test.js:9:16)

ชุดทดสอบ: 1 ล้มเหลว รวม 1

การทดสอบ: ล้มเหลว 1 ครั้ง รวม 1 ครั้ง

ภาพรวม: ทั้งหมด 0 รายการ

เวลา: 3.537 วินาที โดยประมาณ 4 วินาที

รันชุดทดสอบทั้งหมด

Jest ยังมีตัวเลือกมากมายที่คุณสามารถใช้เพื่อปรับแต่งลักษณะการทำงานของการทดสอบของคุณ เช่น เรียกใช้การทดสอบในโหมดเฝ้าดู สร้างรายงานความครอบคลุมของโค้ด และอื่นๆ คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกเหล่านี้ได้ในเอกสาร Jest

ห่อ

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

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

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

ดังนั้น หากคุณต้องการปรับปรุงเวิร์กโฟลว์การทดสอบ React ให้ลองใช้ LambdaTest และ Jest ร่วมกันเพื่อให้ได้การทดสอบที่ครอบคลุม ปรับขนาดได้ และมีประสิทธิภาพสำหรับแอปพลิเคชัน React ของคุณ