วิธีใช้ Jest และ Enzyme โดยไม่ต้อง Create-React-App
ขณะนี้ฉันกำลังทำโปรเจ็กต์สำหรับวิทยาลัย และพบกับอุปสรรคที่ตึงเครียดมาก… การทดสอบ หากคุณกำลังทำงานกับ Jest, Enzyme และ React คุณอาจรู้สึกหงุดหงิดเช่นเดียวกัน อย่างไรก็ตาม อย่าเครียดอีกต่อไป ฉันและเพื่อนร่วมงานได้คิดวิธีแก้ปัญหาวิกฤตการทดสอบขึ้นมาแล้ว
ในตอนแรก ฉันดูเอกสารประกอบของ Jest เพื่อหาวิธีซิงค์การทดสอบกับโปรเจ็กต์ของฉัน เอกสารประกอบในแง่ของการตั้งค่าเข้าใจยากนิดหน่อย ดังนั้นฉันจึงไปที่การค้นหาโดย Google และฟอรัม Stack Overflow หลังจากค้นหานานหลายชั่วโมง เพื่อนร่วมงานของฉันก็ส่ง Ping ไปที่ Slack ให้ฉัน และเราก็หาวิธีแก้ปัญหาได้สำเร็จ!!
ก่อนอื่น Jest ทำงานควบคู่ไปกับ Enzyme กับ React ฉันไม่รู้ในตอนแรก แต่คุณต้องมีไฟล์ 'jest.config.js' และไฟล์ .babelrc
ต่อไปนี้เป็นวิธีการตั้งค่าไฟล์เหล่านั้น:
jest.config.js
ไฟล์ jest.config.js ของคุณควรอยู่ในรูทของคุณ
module.exports = {
setupTestFrameworkScriptFile: ‘‹rootDir›/test/setup.js’,
};
.babelrc
ไฟล์ .babelrc ของคุณควรอยู่ในไฟล์รูทของคุณด้วย
{
“presets”: [“es2015”, “react”]
}
แพ็คเกจ.json
นี่คือวิธีที่ไฟล์ package.json ของฉันดูแลการตั้งค่า หากคุณตัดสินใจที่จะใช้โค้ดบางบรรทัดเหล่านี้ ตรวจสอบให้แน่ใจว่าคุณได้ลบ package-lock.json รวมถึงโมดูลโหนดของคุณ แล้วจึงติดตั้ง npm
โฟลเดอร์ทดสอบ
อีกรายการหนึ่งที่เราต้องตั้งค่าคือโฟลเดอร์ 'ทดสอบ' โฟลเดอร์ทดสอบนี้จำเป็นต้องอยู่ในรูทของโปรเจ็กต์ของฉันด้วย รายการเดียวที่มีโฟลเดอร์ทดสอบคือโฟลเดอร์ setup.js ซึ่งมีโค้ดบรรทัดต่อไปนี้:
การทดสอบ
ในที่สุดเราก็มีการทดสอบของเรา การทดสอบของเราเข้าไปในโฟลเดอร์ไคลเอนต์ซึ่งมีส่วนประกอบของเราโดยตรง ไฟล์ส่วนประกอบหลักของเราชื่อ App.js ดังนั้นเราจึงสร้างไฟล์ชื่อ App.test.js เพื่อทำหน้าที่เป็นไฟล์ทดสอบสำหรับส่วนประกอบหลักของเรา ด้านล่างนี้คุณจะเห็นตัวอย่างการทดสอบของเราที่อาจช่วยคุณในเส้นทางการทดสอบของคุณ
และนั่นมัน!
ฉันหวังว่าสิ่งนี้จะช่วยคุณในการเอาชนะวิกฤติการทดสอบ!! เป็นการสูดอากาศบริสุทธิ์เพื่อเอาชนะความยากลำบากในการสร้างสภาพแวดล้อมใหม่ของเรา
ก่อนที่ฉันจะจบรายการบันทึกนี้ ฉันอยากจะส่งกำลังใจเป็นพิเศษถึง Joe Boulos และ Kevin Phung ที่ช่วยฉันรับมือกับช่วงเวลานี้ และเป็นเพื่อนร่วมงานที่น่าทึ่งในการเขียนโค้ดด้วย สุภาพบุรุษเหล่านี้มีความสำคัญต่อการศึกษาของฉัน และฉันก็ขอบคุณพวกเขาไม่พอ!!
ฉันหวังว่าฉันจะสามารถตอบแทนด้วยการช่วยให้คุณเอาชนะความเครียดในการเขียนโค้ดได้!
“โชคดีนะที่บุกโจมตีปราสาทได้!”
- Magee
