การทดสอบหน่วยใน React Native Applications

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

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

หมายเหตุ: ความรู้พื้นฐานเกี่ยวกับ JavaScript และ React Native จะเป็นประโยชน์อย่างยิ่งเมื่อคุณทำงานผ่านบทช่วยสอนนี้

การทดสอบหน่วยคืออะไร?

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

เพื่อแสดงให้เห็น ให้สร้างองค์ประกอบ Button และจำลองการทดสอบหน่วย:

 import React from 'react'; import { StyleSheet, Text, TouchableOpacity } from 'react-native'; function AppButton({ onPress }) { return ( <TouchableOpacity style={[styles.button, { backgroundColor: colors[color] }]} onPress={onPress} > <Text style={styles.text}>Register</Text> </TouchableOpacity> ); } const styles = StyleSheet.create({ button: { backgroundColor: red; borderRadius: 25, justifyContent: 'center', alignItems: 'center', }, text: { color: #fff } }) export default AppButton;

ส่วนประกอบ Button นี้มีข้อความและฟังก์ชัน onPress มาทดสอบส่วนประกอบนี้เพื่อดูว่าการทดสอบหน่วยเกี่ยวกับอะไร

ขั้นแรก ให้สร้างไฟล์ทดสอบชื่อ Button.test.js :

 it('renders correctly across screens', () => { const tree = renderer.create(<Button />).toJSON(); expect(tree).toMatchSnapshot(); });

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

การทดสอบหน่วยใน React Native Applications

แอปพลิเคชัน React Native สามารถทดสอบได้ด้วยเครื่องมือที่หลากหลาย ซึ่งบางส่วนมีดังต่อไปนี้:

• WebDriver
  เครื่องมือทดสอบโอเพนซอร์สนี้สำหรับแอป Node.js ยังใช้เพื่อทดสอบแอปพลิเคชัน React Native
• ฝันร้าย
  การดำเนินการทดสอบโดยอัตโนมัติในเบราว์เซอร์ ตามเอกสารประกอบ "เป้าหมายคือการเปิดเผยวิธีการง่ายๆ สองสามวิธีซึ่งเลียนแบบการกระทำของผู้ใช้ (เช่น goto , type และ click ) ด้วย API ที่ให้ความรู้สึกซิงโครนัสสำหรับแต่ละบล็อกของสคริปต์ แทนที่จะเป็นการเรียกกลับที่ซ้อนกันอย่างลึกซึ้ง"
• Jest
  นี่เป็นหนึ่งในไลบรารีทดสอบที่ได้รับความนิยมมากที่สุด และไลบรารีที่เราจะเน้นในวันนี้ เช่นเดียวกับ React มันถูกดูแลโดย Facebook และทำขึ้นเพื่อให้การตั้งค่า "zero config" เพื่อประสิทธิภาพสูงสุด
• มอคค่า
  Mocha เป็นห้องสมุดยอดนิยมสำหรับการทดสอบแอปพลิเคชัน React และ React Native ได้กลายเป็นเครื่องมือทดสอบทางเลือกสำหรับนักพัฒนาเนื่องจากความง่ายในการติดตั้งและใช้งานและความรวดเร็ว
• จัสมิน
  ตามเอกสารประกอบ จัสมินเป็นเฟรมเวิร์กการพัฒนาที่ขับเคลื่อนด้วยพฤติกรรมสำหรับการทดสอบโค้ด JavaScript
  

บทนำสู่เรื่องตลกและเอนไซม์

ตามเอกสารประกอบ "Jest เป็นเฟรมเวิร์กการทดสอบ JavaScript ที่น่ายินดีโดยเน้นที่ความเรียบง่าย" ทำงานได้โดยไม่มีการกำหนดค่าใดๆ เมื่อทำการติดตั้ง (โดยใช้ตัวจัดการแพ็คเกจ เช่น npm หรือ Yarn) Jest ก็พร้อมใช้งาน โดยไม่ต้องทำการติดตั้งอื่นๆ

เอ็นไซม์เป็นเฟรมเวิร์กการทดสอบ JavaScript สำหรับแอปพลิเคชัน React Native (หากคุณกำลังใช้งาน React มากกว่า React Native จะมีคำแนะนำให้) เราจะใช้ Enzyme เพื่อทดสอบหน่วยของผลลัพธ์ของแอปพลิเคชันของเรา ด้วยสิ่งนี้ เราสามารถจำลองรันไทม์ของแอปพลิเคชันได้

เริ่มต้นด้วยการตั้งค่าโครงการของเรา เราจะใช้แอป Done With It บน GitHub เป็นตลาดแอปพลิเคชัน React Native เริ่มต้นด้วยการโคลน นำทางไปยังโฟลเดอร์ และติดตั้งแพ็คเกจโดยเรียกใช้สิ่งต่อไปนี้สำหรับ npm...

 npm install

… หรือนี่สำหรับเส้นด้าย:

 yarn install

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

การกำหนดค่าสแนปชอตและ Jest

ในส่วนนี้ เราจะทดสอบการสัมผัสของผู้ใช้และ UI ขององค์ประกอบของแอปโดยการทดสอบสแนปชอตโดยใช้ Jest

ก่อนทำนั้น เราต้องติดตั้ง Jest และการอ้างอิงของมันก่อน ในการติดตั้ง Jest สำหรับ Expo React Native ให้รันคำสั่งต่อไปนี้:

 yarn add jest-expo --dev

สิ่งนี้จะติดตั้ง jest-expo ในไดเรกทอรีของแอปพลิเคชันของเรา ต่อไป เราต้องอัปเดตไฟล์ package.json เพื่อให้มีสคริปต์ทดสอบ:

 "scripts": { "test" "jest" }, "jest": { "preset": "jest-expo" }

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

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

 npm i react-test-renderer --save-dev

… และสำหรับเส้นด้าย สิ่งนี้:

 yarn add react-test-renderer --dev

เรายังมีการกำหนดค่าเล็กน้อยที่ต้องทำในไฟล์ package.json ของเรา ตามเอกสารของ Expo React Native เราจำเป็นต้องเพิ่มการกำหนดค่า transformIgnorePattern ที่ป้องกันไม่ให้การทดสอบทำงานใน Jest เมื่อใดก็ตามที่ไฟล์ต้นฉบับตรงกับการทดสอบ (เช่น หากมีการทดสอบและพบไฟล์ที่คล้ายกันใน node modules ของโครงการ)

 "jest": { "preset": "jest-expo", "transformIgnorePatterns": [ "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)" ] }

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

 import React from "react"; import renderer from "react-test-renderer"; import App from "./App.js" describe("<App />", () => { it('has 1 child', () => { const tree = renderer.create(<App />).toJSON(); expect(tree.children.length).toBe(1); }); });

ตอนนี้ รัน yarn test หรือเทียบเท่า npm หาก App.js มีองค์ประกอบลูกเดียว การทดสอบของเราควรผ่าน ซึ่งจะได้รับการยืนยันในอินเทอร์เฟซบรรทัดคำสั่ง

ในโค้ดด้านบน เราได้นำเข้า React และ react-test-renderer ซึ่งแสดงการทดสอบของเราสำหรับ Expo เราได้แปลงโครงสร้างองค์ประกอบ <App /> เป็น JSON แล้วจึงขอให้ Jest ดูว่าจำนวนองค์ประกอบย่อยที่ส่งคืนใน JSON เท่ากับที่เราคาดหวังหรือไม่

การทดสอบสแนปชอตเพิ่มเติม

ดังที่ David Adeneye กล่าวว่า:

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

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

 it('renders correctly across screens', () => { const tree = renderer.create( ).toJSON(); expect(tree).toMatchSnapshot(); }); it('renders correctly across screens', () => { const tree = renderer.create( ).toJSON(); expect(tree).toMatchSnapshot(); });

เพิ่มสิ่งนี้ในการทดสอบที่เราได้เขียนไปแล้ว จากนั้นรัน yarn test (หรือเทียบเท่า npm) หากการทดสอบของเราผ่าน เราควรเห็นสิ่งนี้:

 PASS src/App.test.js √ has 1 child (16ms) √ renders correctly (16ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 1 total Time: 24s

ข้อมูลนี้บอกเราว่าการทดสอบของเราผ่านและระยะเวลาที่พวกเขาใช้ ผลลัพธ์ของคุณจะดูคล้ายคลึงกันหากการทดสอบผ่าน

มาดูการเยาะเย้ยฟังก์ชั่นบางอย่างใน Jest กัน

การเยาะเย้ย API การโทร

ตามเอกสารของ Jest:

ฟังก์ชันจำลองช่วยให้คุณทดสอบการเชื่อมโยงระหว่างโค้ดโดยลบการใช้งานจริงของฟังก์ชัน จับการเรียกใช้ฟังก์ชัน (และพารามิเตอร์ที่ส่งผ่านในการเรียกเหล่านั้น) จับภาพอินสแตนซ์ของฟังก์ชันคอนสตรัคเตอร์เมื่อสร้างอินสแตนซ์ด้วย "ใหม่" และอนุญาตให้ทดสอบ- การกำหนดค่าเวลาของค่าส่งคืน

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

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

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

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

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

 global.fetch = jest.fn(); // mocking an API success response once fetch.mockResponseIsSuccess = (body) => { fetch.mockImplementationForOnce ( () => Promise.resolve({json: () => Promise.resolve(JSON.parse(body))}) ); }; // mocking an API failure response for once fetch.mockResponseIsFailure = (error) => { fetch.mockImplementationForOnce( () => Promise.reject(error) ); };

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

ด้านล่างนี้คือส่วนประกอบ product ของแอปพลิเคชันของเรา ซึ่งมีวัตถุ product และส่งคืนข้อมูลเป็น props

 import React from 'react'; const Product = () => { const product = { name: 'Pizza', quantity: 5, price: '$50' } return ( <> <h1>Name: {product.name}</h1> <h1>Quantity: {product.quantity}</h1> <h1>Price: {product.price}</h1> </> ); } export default Product;

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

 describe("", () => { it("accepts products props", () => { const wrapper = mount(<Customer product={product} />); expect(wrapper.props().product).toEqual(product); }); it("contains products quantity", () => { expect(value).toBe(3); }); });

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

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

การเยาะเย้ยคำขอ API ภายนอก

จนถึงขณะนี้ เราได้ทำการทดสอบการเรียก API กับองค์ประกอบอื่นๆ ในแอปพลิเคชันของเรา ทีนี้มาจำลองการเรียก API ภายนอกกัน เราจะใช้ Axios ในการทดสอบการเรียกภายนอกไปยัง API เราต้องจำลองคำขอของเราและจัดการการตอบกลับที่เราได้รับด้วย เราจะใช้ axios-mock-adapter เพื่อล้อเลียน Axios ขั้นแรก เราต้องติดตั้ง axios-mock-adapter โดยรันคำสั่งด้านล่าง:

 yarn add axios-mock-adapter

สิ่งต่อไปที่ต้องทำคือสร้างแบบจำลองของเรา:

 import MockAdapter from 'axios-mock-adapter'; import Faker from 'faker' import ApiClient from '../constants/api-client'; import userDetails from 'jest/mockResponseObjects/user-objects'; let mockApi = new MockAdapter(ApiClient.getAxiosInstance()); let validAuthentication = { name: Faker.internet.email(), password: Faker.internet.password() mockApi.onPost('requests').reply(config) => { if (config.data === validAuthentication) { return [200, userDetails]; } return [400, 'Incorrect username and password']; });

ที่นี่ เรากำลังเรียกใช้ ApiClient และส่งอินสแตนซ์ Axios ไปยังมันเพื่อล้อเลียนข้อมูลประจำตัวของผู้ใช้ เราใช้แพ็คเกจชื่อ faker.js เพื่อสร้างข้อมูลผู้ใช้ปลอม เช่น ที่อยู่อีเมลและรหัสผ่าน

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

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

 it('successful sign in with correct credentials', async () => { await store.dispatch(authenticateUser('[email protected]', 'password')); expect(getActions()).toMatchSnapshot(); }); it('unsuccessful sign in with wrong credentials', async () => { await store.dispatch(authenticateUser('[email protected]', 'wrong credential')) .catch((error) => { expect(errorObject).toMatchSnapshot(); });

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

ตอนนี้ให้รัน yarn test หรือ npm test ฉันแน่ใจว่าการทดสอบทั้งหมดของคุณจะผ่านไป

มาดูวิธีทดสอบส่วนประกอบในไลบรารีการจัดการสถานะ Redux

การทดสอบ Redux Actions และ Reducers โดยใช้ Snapshots

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

• เพื่อทดสอบ actions เราสร้าง redux-mock-store และส่งการดำเนินการ
• ในการทดสอบตัวลด เรานำเข้าตัว reducer และส่งผ่านสถานะและอ็อบเจ็กต์การกระทำไปที่มัน

ด้านล่างนี้คือการทดสอบ Redux พร้อมสแนปชอต เราจะทำการทดสอบการดำเนินการที่ส่งโดยการตรวจสอบสิทธิ์ผู้ใช้ที่ SIGN-IN และดูว่าตัวลด user จัดการการดำเนินการ LOGOUT อย่างไร

 import mockStore from 'redux-mock-store'; import { LOGOUT } from '../actions/logout'; import User from '../reducers/user'; import { testUser } from 'jest/mock-objects'; describe('Testing the sign in authentication', () => { const store = mockStore(); it('user attempts with correct password and succeeds', async () => { await store.dispatch(authenticateUser('[email protected]', 'password')); expect(store.getActions()).toMatchSnapshot(); }); }); describe('Testing reducers after user LOGS OUT', () => { it('user is returned back to initial app state', () => { expect(user(testUser, { type: LOGOUT })).toMatchSnapshot(); }); });

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

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

ต่อไป เราทดสอบโดยรัน yarn test หากการทดสอบผ่านไป เราควรเห็นผลดังต่อไปนี้:

 PASS src/redux/actions.test.js √ user attempts with correct password and succeeds (23ms) √ user is returned back to initial app state (19ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 2 total Time: 31s

บทสรุป

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

แหล่งข้อมูลเพิ่มเติม

• David Adeneye, Smashing Magazine, “คู่มือปฏิบัติสำหรับการทดสอบตอบสนองแอปพลิเคชันดั้งเดิมด้วย Jest”
• เอกสารตลก
• “การทดสอบด้วย Jest”, Expo React Native document
• “การเรียนรู้ที่จะทดสอบ React Native ด้วย Jest”, Jason Gaare