WebdriverIO组件测试中TypeScript导入别名无法使用的问题

问题核心 #

你的错误来自Vite的导入分析插件，说明WebdriverIO在浏览器环境中运行测试时，无法识别tsconfig.json里的paths别名——tsconfig-paths/register是Node.js端的模块，在浏览器环境不生效，而测试代码是通过Vite编译到浏览器执行的，所以必须配置Vite的别名规则。

解决方案 #

1. 配置Vite解析别名 #

直接在Vite配置中添加与tsconfig.json对应的别名，或用插件自动同步：

方法一：手动配置Vite别名

创建/修改项目根目录下的vite.config.ts：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@app': path.resolve(__dirname, './src'), // 映射@app到src目录
    },
  },
});

方法二：自动同步tsconfig的paths

使用vite-tsconfig-paths插件自动读取tsconfig.json的paths配置，避免重复编写：

npm install vite-tsconfig-paths --save-dev

修改vite.config.ts：

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [tsconfigPaths()],
});

2. 让WebdriverIO使用Vite配置 #

在wdio.conf.ts中配置Vite服务，指定你的Vite配置文件：

import type { Options } from '@wdio/vite-service';

export const config: WebdriverIO.Config = {
  // ...其他配置项
  services: [
    ['vite', {
      configFile: './vite.config.ts', // 指向你的Vite配置文件
    } as Options],
  ],
  // ...
};

3. 验证配置 #

重启WebdriverIO测试服务，重新运行测试，Vite会正确解析@app开头的导入路径。

替代方案：使用Babel插件（若项目依赖Babel） #

如果项目用Babel编译，可使用babel-plugin-module-resolver处理别名：

npm install babel-plugin-module-resolver --save-dev

修改.babelrc或babel.config.js：

{
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      "alias": {
        "@app": "./src"
      }
    }]
  ]
}

确保WebdriverIO的Babel配置正确加载该插件。

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