Electron应用运行正常但Playwright测试因PNG文件导入报语法错误的解决方案咨询

问题描述 #

我遇到了一个棘手的问题：我有一个基于Webpack构建的Electron应用，同时用Playwright框架编写了对应的测试用例。使用命令webpack --config webpack.common.js构建应用完全正常，没有任何错误，应用运行也没问题。但在VS Code的Playwright测试运行器中执行测试时，导入PNG文件的代码会触发语法错误：

SyntaxError: Invalid or unexpected token at ..\src\App.tsx:4
2 | import { HashRouter, Navigate, Route, Routes, useNavigate } from 'react-router-dom';
3 | import pngtest from './images/pngtest.png';

4 | import png_test from './images/png_test.png';

我大概明白问题出在：Playwright运行在Node.js环境中，而Electron应用是通过Webpack打包处理过资源导入的，Node.js本身无法解析这类资源导入语句，所以才会报错。但我在网上没找到能解决我这个场景的方案，希望能得到大家的帮助。

已尝试的解决方案 #

我已经试过以下几种方法，但都没有效果：

1. 为测试环境创建独立Webpack配置 #

我专门为测试环境写了一个Webpack配置文件，用webpack-merge合并现有webpack.common.js，只添加null-loader来忽略PNG资源的导入：

const path = require('path');
const { merge } = require('webpack-merge');
const common = require('../webpack.common.js');

// 此配置用于运行Playwright测试
// 合并通用配置webpack.common.js并针对测试模式修改
module.exports = merge(common, {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: 'null-loader' // 防止图片加载错误
      },
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  }
});

2. 在测试文件夹中添加类型声明文件 #

我在测试文件夹里创建了images.d.ts文件，试图通过类型声明处理PNG导入（我刚接触这个框架，不太清楚这个文件的具体作用）：

declare module '*.png' {
  const value: string;
  export default value;
}

3. 根据环境区分资源导入 #

我尝试通过判断环境变量，在测试环境下跳过资源导入：

const isTest = process.env.NODE_ENV === 'test';
isTest ? '' : require('./images/pngtest.png');

求助 #

以上方法都没能解决我的问题，请问还有什么其他可行的解决方案吗？非常感谢大家的帮助！

内容来源于stack exchange