ไลบรารีการทดสอบปฏิกิริยา - typescript พร้อม async และ await: มีการใช้ตัวแปรก่อนที่จะถูกกำหนด ts (2454)

ทำไม TypeScript ถึงบ่นที่นี่ว่าตัวแปรยังไม่ได้ถูกกำหนดค่าเหรอ? ฉันพลาดอะไรชัด ๆ เกี่ยวกับขอบเขตของตัวแปรหรือเปล่า?

test('test', async () => {
  let renderResult: RenderResult;
  await act(async () => {
    renderResult = render(<Component />);
  });

  await act(async () => {
    renderResult.rerender(<Component />);
  });
  // ERRROR: Variable 'renderResult' is used before being assigned.ts(2454)
  expect(renderResult.container.firstElementChild!.getAttribute('src')).toBe('original');
});

คำตอบ #1

คุณกำลังได้รับข้อผิดพลาดนี้ เพราะคุณมี "strictNullChecks": true ในไฟล์ tsconfig.json ของคุณ ดังนั้นตัวคอมไพเลอร์จึงแจ้งว่าตัวแปรอาจมีค่าเป็น undefined

ตัวเลือกที่นี่คือ

• เพื่อเริ่มต้นตัวแปรด้วยอินสแตนซ์ของออบเจ็กต์ว่าง (หรือค่าที่ว่างเช่น "" สำหรับ String, [] สำหรับ Array, เป็นต้น)
• เพื่อใช้ตัวดำเนินการยืนยันไม่เป็นค่า null (
  expect(renderResult!.container.firstEleme... ),
• ปิดการใช้งาน strictNullChecks ในไฟล์ tsconfig.json ของคุณ,
• หรือตรวจสอบด้วยวิธีอื่นสำหรับค่าที่ไม่ถูกกำหนดหรือยืนยันว่าค่าไม่ใช่ค่าไม่กำหนด

แต่ตามความเห็นส่วนตัวของฉัน ถ้าคุณกำลังใช้ strictNullChecks คุณควรพิจารณาการใช้รูปแบบ null-object

คำตอบ #2

อีกวิธีหนึ่งคือการทำเครื่องหมาย renderResult เป็น RenderResult หรือ undefined แล้วจึงเข้าถึงมันด้วยการเชนแบบเลือกได้ที่ท้าย

test('test', async () => {
  let renderResult: RenderResult | undefined
  await act(async () => {
    renderResult = render(<Component />);
  });

  await act(async () => {
    renderResult.rerender(<Component />);
  });
  // ERRROR: Variable 'renderResult' is used before being assigned.ts(2454)
  expect(renderResult?.container.firstElementChild!.getAttribute('src')).toBe('original');
});