我正在使用@stripe/react-stripe-js
中的Elements
和PaymentElement
组件,并禁用了加载器来实现自定义解决方案。
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();
});
});
1条答案
按热度按时间jdgnovmf1#
最有可能的情况是,您希望替换/模拟Stripe元素并手动触发事件,以测试处理程序和加载程序的行为:
https://testing-library.com/docs/react-testing-library/faq-〉“如何测试更改处理程序上的输入?”https://testing-library.com/docs/dom-testing-library/api-events
如果测试库社区/作者不允许您测试此就绪事件,您可能需要联系他们以获得帮助。