reactjs - การทดสอบด้วย Jest สำหรับวิธีการคัดลอกไปยังคลิปบอร์ดโดยใช้ React กับ TypeScript

ฉันพยายามให้แน่ใจว่าค่าที่ถูกต้องถูกคัดลอกไปยังคลิปบอร์ดของผู้ใช้เมื่อพวกเขาคลิกปุ่ม นี่คือวิธีการคัดลอกของฉัน ฉันใช้ ref บน input เพื่อเข้าถึงค่าที่ถูกต้อง

  protected copyToClipboard() {
   console.log("clicked!");
   const text = this.controls.copyData;

   if (!_.isNil(text)) {
     text.current.focus();
     text.current.select();

     document.execCommand("copy");
     this.setState({copied: true});
   }
 }

สำหรับการทดสอบของฉัน:

  test("Ensure right value is copied to clipboard", () => {
    const wrapper = mount(<MyComponent />);

    const copyButton = wrapper.find(".copyBtn");
    copyButton.simulate("click");

    const copyToClipboardSpy = jest.spyOn(document as any, "execCommand");
    wrapper.update();

    expect(copyToClipboardSpy).toHaveBeenCalledWith("copy");
  });

ข้อผิดพลาดที่ฉันได้รับเมื่อฉันรันการทดสอบคือ TypeError: document.execCommand is not a function ซึ่งมีเหตุผล แต่ฉันไม่แน่ใจว่าจะดำเนินการอย่างไร

ผมค่อนข้างใหม่กับการทดสอบนะ แค่อยากบอกไว้ก่อน ผมยังอ่านมาด้วยว่าอาจจะไม่สามารถเข้าถึง document.execCommand ได้ แต่ก็พยายามหาทางเลือกที่ดีเพื่อเข้าควบคุมการทดสอบและเข้าถึงค่าที่ถูกคัดลอก ผมซาบซึ้งกับคำแนะนำใด ๆ ที่สามารถให้ได้ในเรื่องนี้!

คำตอบ #1

โพสต์สิ่งนี้เผื่อว่าใครคนอื่นอยู่ในสถานการณ์คล้ายกัน มันยังไม่ได้ตรวจสอบค่าจริง ๆ แต่สิ่งที่ฉันจัดการได้คือการใช้วิธี document.execCommand

ฉันตั้งค่าฟังก์ชันจำลองไว้เหนือตัวห่อ:

document.execCommand = jest.fn();

ด้วยสิ่งนี้ การทดสอบหยุดแสดง TypeError จากนั้นความคาดหวังของฉันรวมถึงการตรวจสอบว่า spy ถูกเรียกแล้ว คาดว่าสถานะสำเนาของฉันเปลี่ยนเป็น true และ:

expect(document.execCommand).toHaveBeenCalledWith("copy");

การทดสอบผ่าน! วิธีแก้ปัญหาที่เป็นไปได้สำหรับค่านี้คือดูว่าฉันสามารถ "วาง" ค่านี้แล้วตรวจสอบมันได้หรือไม่ จะทำการแก้ไขการตอบกลับนี้ถ้าฉันสามารถจัดการได้

คำตอบ #2

เมื่อคุณใช้ navigator.clipBoard.writeText แทนการใช้ document.exec("copy") คุณสามารถอ้างอิงกระทู้นี้เพื่อหาวิธีแก้ปัญหาอย่างมีสไตล์ที่ให้คุณสามารถตรวจสอบเนื้อหาได้ด้วย