如何使用 Jest 模拟反应条带函数?

时间:2021-07-02 16:19:55

标签: reactjs unit-testing jestjs stripe-payments react-testing-library

我对模拟相当陌生,在我们的代码库中我们使用 Stripe,我需要编写一些测试来提高覆盖率。我想模拟“paymentRequest”函数和“canMakePayment”方法,但不确定我的方法在语法上是否正确。什么是嘲笑条纹的推荐方法。我的方法如下

在我的组件中,这是我使用条纹的方式

import { useStripe } from '@stripe/react-stripe-js';

const [paymentRequest, setPaymentRequest] = React.useState(null);
const stripe = useStripe();

React.useEffect(() => {
  async function doesWalletExist() {
    try {
      if (stripe) {
        const pr = stripe.paymentRequest({
          country: 'GB',
          currency: 'gbp',
          total: {
            label: 'total',
            amount: 0,
          },
          requestPayerName: true,
        });

        // Check the availability of the Payment Request API.
        const result = await pr.canMakePayment();

        if (result && result.applePay) setPaymentRequest(pr);

        pr.on('paymentmethod', async (event) => {
          handlePaymentMethodReceived(event);
        });
      }
    } catch (err) {
      console.log(err);
    }
  }

  doesWalletExist();
}, [stripe]);

我想测试是否正在调用 'paymentRequest' 并模拟 'canMakePayment' 的返回值,以便我可以测试是否在正确的条件下正确调用了 'setPaymentRequest',我不知道如何执行此操作。

下面是我试图模拟条纹的方式

const mockPaymentRequest = jest.fn();

const mockStripe = {
  paymentRequest: mockPaymentRequest,
};

jest.mock('@stripe/react-stripe-js', () => ({
  useStripe: jest.fn(() => mockStripe),
}));

const renderComponent = () => {
  render(
    <ThemeProvider theme={theme}>
      <Component />
    </ThemeProvider>
  );
}

it('should call paymentRequest', () => {
  renderComponent();

  expect(mockPaymentRequest).toHaveBeenCalled(); //results in failure
});

0 个答案:

没有答案