无法使用Istanbul或cypress/instrument为Expo应用插桩求助

架构老林

2026-8-9

解决Expo Web + Cypress代码覆盖率兼容问题

核心冲突原因

Expo依赖自定义的babel-preset-expo预设，直接添加babel-plugin-istanbul会和Expo内置的Babel配置逻辑冲突，再加上Expo Web的打包流程有特殊处理，常规的istanbul代码注入方式无法正常生效。

具体解决步骤

安装依赖包
除了官方推荐的babel-plugin-istanbul，还需要@cypress/code-coverage来衔接Cypress和覆盖率数据：
```
npm install --save-dev babel-plugin-istanbul @cypress/code-coverage
```

调整Expo的Babel配置
在项目根目录的babel.config.js中，基于Expo预设扩展配置，仅在测试环境注入istanbul插件：

module.exports = function(api) {
  api.cache(true);
  const presets = ['babel-preset-expo'];
  const plugins = [];

  // 仅在Cypress测试环境启用覆盖率插件
  if (process.env.NODE_ENV === 'test' || process.env.CYPRESS) {
    plugins.push('istanbul');
  }

  return {
    presets,
    plugins,
  };
};

配置Cypress集成逻辑

在cypress/support/e2e.js（或你的Cypress支持文件）中导入覆盖率支持模块：
```
import '@cypress/code-coverage/support'
```

在cypress.config.js中注册覆盖率处理任务：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      require('@cypress/code-coverage/task')(on, config)
      return config
    },
  },
})

正确启动测试流程
必须设置环境变量让Expo加载测试环境的Babel配置，且不能用开发模式（会跳过插件注入）：
```
# 第一个终端启动Expo Web生产构建服务
CYPRESS=true expo start --web --no-dev
# 第二个终端启动Cypress
npx cypress open
```