如何在React测试中加载Stripe？测试含Stripe的React组件报错求助

嘿，我之前也踩过这个坑，给你几个亲测有效的解决办法：

方案1：测试前手动注入Stripe.js #

测试框架（比如Jest）默认不会自动加载外部脚本，所以我们可以在测试启动前手动把Stripe.js加到测试环境里。在你的测试文件里加这段代码：

beforeAll(() => {
  const script = document.createElement('script');
  script.src = 'https://js.stripe.com/v3/';
  script.async = true;
  document.body.appendChild(script);

  // 等脚本加载完再跑测试，避免异步问题
  return new Promise(resolve => {
    script.onload = resolve;
  });
});

这样测试运行时，Stripe.js就已经准备好，不会再抛出那个加载错误了。

方案2：用Mock替代真实Stripe（更高效） #

如果不想每次测试都加载外部脚本（能加快测试速度），可以用Jest Mock掉全局的Stripe对象。在测试文件顶部加这段Mock代码：

// Mock全局Stripe对象，模拟它的核心方法
global.Stripe = jest.fn(() => ({
  elements: jest.fn(() => ({
    create: jest.fn(() => ({
      mount: jest.fn(),
      unmount: jest.fn()
    }))
  }))
}));

这样测试时会用假的Stripe对象代替真实的，既不会报错，还能验证组件和Stripe相关的交互逻辑。

方案3：检查组件的初始化逻辑 #

有时候生产环境是异步加载Stripe，但测试时组件可能抢在脚本加载完成前就渲染了。可以给组件加个状态，等Stripe加载好再渲染Elements：

// 你的组件示例
import { useEffect, useState } from 'react';
import { StripeProvider, Elements } from 'react-stripe-elements';

const PaymentForm = () => {
  const [isStripeReady, setIsStripeReady] = useState(false);

  useEffect(() => {
    // 检查Stripe是否已经加载
    if (window.Stripe) {
      setIsStripeReady(true);
    } else {
      // 监听Stripe加载完成的事件（如果是异步加载脚本的话）
      document.addEventListener('stripeReady', () => setIsStripeReady(true));
    }
  }, []);

  // 没加载好就显示加载状态，避免报错
  if (!isStripeReady) return <div>支付组件加载中...</div>;

  return (
    <StripeProvider stripe={window.Stripe('你的发布密钥')}>
      <Elements>
        {/* 这里放你的支付表单内容 */}
      </Elements>
    </StripeProvider>
  );
};

这样测试时只要确保isStripeReady变为true，组件就能正确渲染，不会触发加载错误。

另外还要注意，比如Jest用jsdom模拟浏览器环境，要确保jsdom的配置没问题，允许操作document对象（一般默认是允许的）。

内容的提问来源于stack exchange，提问作者Victor Pudeyev