I am facing a bit of a situation.
I have an electron application built with webpack for which I have written tests in the Playwright framework.
Building the electron application with the following command:
webpack --config webpack.common.js
works fine, no errors and it runs properly.
However, when executing a test in vs code playwright test runner I get a syntax error on importing png files.
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';
I have tried the following solutions:
const path = require('path');
const { merge } = require('webpack-merge');
const common = require('../webpack.common.js');
// This configuration is used for running Playwright tests
// Merges the common configuration webpack.common.js and modifies it for testing mode
module.exports = merge(common, {
mode: 'development',
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: 'null-loader' // Prevents image loading errors
},
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
}
});
I used webpack-merge to merge the actual existing webpack.common.js with this new one, because I don't want any new configurations besides ignoring png asset imports with null-loader.
---> this did not work.
declare module '*.png' {
const value: string;
export default value;
}
---> this did not work
const isTest = process.env.NODE_ENV === 'test';
isTest ? '' : require('./images/pngtest.png');
---> this did not work
I understand sort of, that Playwright runs in a nodeJs environment, and the electron app is bundled by Webpack, and that's why there is no syntax error in the actual app, because nodeJs cannot parse? asset imports.
But I could not find any solutions on the internet. So I'm wondering what solutions can you provide me?
Thanks for all the help!
Found an answer.
Summary of my fix:
.tsx
files in my test files..ts
or .tsx
files that, directly or indirectly, import images (like PNGs) or CSS.Best practice:
.ts
files (with no image/CSS imports) in your Playwright test files..tsx
files or any file that could eventually import images or styles.This approach will reliably prevent "Invalid or unexpected token" errors related to asset imports in your tests.