使用Cypress测试React中Stripe Elements时遇空白页及报错问题

问题定位 #

Uncaught TypeError: Cannot read properties of undefined (reading 'queuedMessages') 这个错误是Cypress测试环境下Stripe Elements内部消息队列初始化失败导致的，核心诱因通常是插件兼容性、Cypress网络拦截干扰、Stripe加载时机不匹配这几类问题。

针对性解决方法 #

1. 排查cypress-plugin-stripe-elements插件兼容性 #

你当前使用的Cypress 12.17.4和cypress-plugin-stripe-elements@1.0.2版本组合可能存在适配问题：

• 直接卸载该插件（多数场景下这个插件反而会干扰Stripe正常初始化流程），改用手动等待逻辑替代：

// 在 checkout 页面加载后添加等待
cy.window().should('have.property', 'Stripe');
cy.get('stripe-payment-element', { timeout: 10000 }).should('be.visible');

• 若仍想保留插件，尝试升级到插件最新版本后再测试。

2. 允许Stripe相关网络请求 #

Cypress默认拦截所有网络请求，会破坏Stripe脚本加载和内部通信，在测试文件中添加放行规则：

beforeEach(() => {
  // 放行Stripe API请求
  cy.intercept('https://api.stripe.com/**', req => req.continue());
  // 放行Stripe脚本加载请求
  cy.intercept('https://js.stripe.com/**', req => req.continue());
});

3. 调整React组件中Stripe的加载时机 #

确保stripePromise完全解析后再渲染Elements组件，避免异步加载导致的初始化异常：

import { useState, useEffect } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';
import Payments from './Payments';

const stripePromise = loadStripe('你的公钥');

const PaymentWrapper = (props) => {
  const [stripeLoaded, setStripeLoaded] = useState(false);

  useEffect(() => {
    stripePromise.then(() => setStripeLoaded(true));
  }, []);

  return stripeLoaded ? (
    <Elements stripe={stripePromise} options={props.options}>
      <Payments {...props} />
    </Elements>
  ) : null;
};

export default PaymentWrapper;

4. Mock Stripe Elements（备选方案） #

如果以上方法无效，可在测试环境中Mock Stripe Elements，跳过真实加载流程：

// 在 cypress/support/index.js 中添加全局Mock
Cypress.on('window:before:load', (win) => {
  win.Stripe = {
    loadStripe: () => Promise.resolve({}),
    Elements: () => ({
      mount: () => {},
      unmount: () => {}
    })
  };
});

5. 升级Cypress版本 #

Cypress 12.x属于较旧版本，升级到最新稳定版（如13.x或14.x），新版本对第三方脚本的兼容性更好，大概率能解决这类初始化异常问题。

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