不使用异步调用 React Test prop 组件

Question

我在 React.JS 中的测试有问题。我的组件扫描二维码图像，我使用此依赖项：https://www.npmjs.com/package/qr-scanner 版本 1.4.1

这是我的测试

describe("BarcodeScanner", () => {
  it("can scan qr code image", async () => {
    const handleOnScan = jest.fn();

    render(<BarcodeScanner image={image} onScan={handleOnScan} />);

    expect(await handleOnScan).toHaveBeenCalled();
  });
});

我传递了 prop image，这是一个带有二维码的图像，我传递了 onScan，这是一个 jest 的函数。此函数必须在扫描图像后调用。

这是我的组件：

const scanImage = (image: string) => {
  QrScanner.scanImage(image,{
    returnDetailedScanResult: true
  })
  .then((result) => {
    onScan(result.data);
  })
  .catch((error) => {
    if (onError) {
      onError(error || "No QR code found");
    }
  });
};

我的测试没有通过，因为 jest 函数没有被调用。 Test result

Answer 1

您对 onScan 的模拟不正确，您没有在等待结果。该动作在下一个“滴答声”中解决，而不是立即解决。我认为这应该有效（未测试）

describe('BarcodeScanner', () => {
  it('can scan qr code', async () => {
    const handleOnScan = jest.fn();

    render(<BarcodeScanner image={image} onScan={handleOnScan} />);

    await waitFor(() => expect(handleOnScan).toHaveBeenCalled());
  });
});

不使用异步调用 React Test prop 组件

React Test prop component is not called with async

javascript

unit-testing

asynchronous

reactjs

jestjs