如何在Remix项目的Cypress测试中访问app.state

你之前的思路问题在于：类组件里window.app = this是把组件实例挂载到全局，实例里包含了组件的state；但函数式组件中App是组件函数本身，不是带状态的实例，直接赋值window.app = App自然拿不到状态。下面是针对Remix的可行方案：

方案1：直接在根组件暴露状态引用 #

利用useRef同步状态，确保Cypress能获取到最新的状态值（因为useState的状态是不可变的，直接暴露会拿到旧值）：

// root.tsx
import { useState, useEffect, useRef } from "react";

export default function App() {
  // 示例应用状态，替换成你实际的状态
  const [appState, setAppState] = useState({
    user: null,
    theme: "light"
  });

  // 用ref同步状态，保证始终能拿到最新值
  const stateRef = useRef(appState);
  stateRef.current = appState;

  useEffect(() => {
    // 仅在Cypress测试环境下暴露，避免生产环境泄露
    if (window.Cypress) {
      window.appState = stateRef;
    }

    // 测试结束后清理全局变量
    return () => {
      if (window.Cypress) {
        delete window.appState;
      }
    };
  }, []);

  // ... 你的组件渲染逻辑
  return <div>{/* 页面内容 */}</div>;
}

在Cypress测试中这样访问：

cy.window()
  .its('appState.current')
  .should('deep.equal', {
    user: { id: 1, name: "Test" },
    theme: "light"
  });

方案2：封装自定义Hook复用暴露逻辑 #

如果多个组件都需要暴露状态，可以封装一个Hook，让逻辑更简洁：

// hooks/useExposeToCypress.ts
import { useRef, useEffect } from "react";

export function useExposeToCypress(key: string, state: any) {
  const stateRef = useRef(state);
  stateRef.current = state;

  useEffect(() => {
    if (window.Cypress) {
      window[key] = stateRef;
    }

    return () => {
      if (window.Cypress) {
        delete window[key];
      }
    };
  }, [key]);
}

在组件中使用：

// routes/index.tsx
import { useState } from "react";
import { useExposeToCypress } from "~/hooks/useExposeToCypress";

export default function Index() {
  const [count, setCount] = useState(0);
  // 把count状态以"pageCount"为键暴露给Cypress
  useExposeToCypress("pageCount", count);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

测试代码：

cy.get('button').click();
cy.window()
  .its('pageCount.current')
  .should('eq', 1);

关键注意点 #

• Remix是SSR框架，useEffect里的代码只会在客户端执行，刚好匹配Cypress的客户端测试场景，不用担心服务端报错。
• 一定要加上window.Cypress的判断，避免在生产环境把应用状态暴露到全局，造成安全风险。

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