reactjswebpackelectronplaywrightplaywright-test

Playwright test fails on an electron application, but running electron application is working fine


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!


Solution

  • Found an answer.

    Summary of my fix:

    Best practice:

    This approach will reliably prevent "Invalid or unexpected token" errors related to asset imports in your tests.