ลองใช้ Mock กับ Detox framework

เนื่องจากการเทส Mobile App ในหลายๆครั้งเราอาจจำเป็นต้องใช้การ Mock เพื่อทำให้เทสของเรารันต่อจนจบได้ ยกตัวอย่างเช่น

• ทำการ Stub feature ที่ Detox ยังไม่รองรับ เช่น อัพโหลดรูป หรือ อัพโหลดไฟล์ต่างๆ
• เปลี่ยน api endpoint ของ App ที่กำลังเทสไปชี้ที่ mock api แทน

โดยการ Mock ของ Detox จะเป็นการใช้ Feature Mock ของ React Native

เริ่มต้นการ Mock บน Debug Mode

ก่อนอื่นเรามาดูตัวอย่าง App กันก่อน โดย App ที่จะใช้ Demo นี้เป็น Todo List App ซึ่ง Header ของ App ไม่เป็นภาษาอังกฤษ
โดยเรามาลองปรับเป็นภาษาอังกฤษด้วยการ mock กันดูครับ

export function Header({ tasksCounter }: HeaderProps) {
  const tasksCounterText = tasksCounter === 1 ? `tarefa` : `tarefas`;

  return (
    <View style={styles.container}>
      <Image source={logoImg} />

      <View style={styles.tasks}>
        <Text style={styles.tasksCounter}>Você tem </Text>
        <Text style={styles.tasksCounterBold}>
          {tasksCounter} {tasksCounterText}
        </Text>
      </View>
    </View>
  );
}

ทำการสร้าง mock file ด้วยให้ชื่อเหมือนกับไฟล์ที่เราต้องการจะ mock แต่ให้เพิ่ม suffix .mock เข้าไป เช่น Header.mock.tsx

// src/components/Header.mock.tsx
export function Header({ tasksCounter }: HeaderProps) {
  const tasksCounterText = tasksCounter <= 1 ? `item` : `items`;
  return (
    <View style={styles.container}>
      <Image source={logoImg} />

      <View style={styles.tasks}>
        <Text style={styles.tasksCounter}>Todo Item </Text>
        <Text style={styles.tasksCounterBold}>
          {tasksCounter} {tasksCounterText}
        </Text>
      </View>
    </View>
  );
}

Rerun react app ใหม่ด้วยออฟชั่น –sourceExts

npx react-native start --sourceExts mock.js,mock.ts,mock.tsx

จะเห็นว่า Header แสดง text Todo item 0 item แทนแล้ว

เท่านี้เมื่อเราทำการรันเทส ก็จะพบว่า script ของเราทำการใช้งาน mock code เป็นที่เรียบร้อยแล้วนั่นเอง

สามารถไปโหลด Source code เต็มๆได้ที่ Github react-native-todo-list