Jest.js React测试库未调用Stripe的PaymentElement组件的onReady侦听器

niwlg2el  于 2023-03-06  发布在  Jest
关注(0)|答案(1)|浏览(127)

我正在使用@stripe/react-stripe-js中的ElementsPaymentElement组件,并禁用了加载器来实现自定义解决方案。

const [isStripeLoading, setIsStripeLoading] = useState(true);

const onFormReady = () => {
  setIsStripeLoading(false);
};

return (
  <Elements stripe={stripe} options={ { loader: 'never' } }>
    {isStripeLoading && (
      <div className="payment-methods__stripe-element-experiment--icon">
        <Icon type="Loading" />
      </div>
    )}
    <PaymentElement
      onReady={onFormReady}
    />
  </Elements>
)

如何使用React Testing Library编写测试以反映此状态更改onReady
我尝试呈现 Package 器组件,该组件本身 Package 在react-redux提供器中,但它从未将isStripeLoading设置为false

const renderComponent = async (state: typeof initialState) => {
  const store = configureStore(state, reducers);
  return await render(
    <Provider store={store}>
      <CheckoutForm {...props} />
    </Provider>
  );
};

describe('CheckoutForm', () => {

  it('should render', async () => {
    let container;
    await act(async () => {
      container = await renderComponent(initialState);
    });

    const { getByTestId } = container;
    expect(getByTestId('stripe-payment-element')).toBeTruthy();
  });
});
jdgnovmf

jdgnovmf1#

最有可能的情况是,您希望替换/模拟Stripe元素并手动触发事件,以测试处理程序和加载程序的行为:
https://testing-library.com/docs/react-testing-library/faq-〉“如何测试更改处理程序上的输入?”https://testing-library.com/docs/dom-testing-library/api-events
如果测试库社区/作者不允许您测试此就绪事件,您可能需要联系他们以获得帮助。

相关问题