Skip to content

[Bug]: React component testing via vite build loads external modules as sources #29522

Open
@mskonst

Description

@mskonst

Version

1.41.2

Steps to reproduce

Unfortunately, I do not have a dedicated reproducer because it happens in a huge private repository. However, I can describe what I observe and can collect logs, more info as required.
I have a package in a monorepo, which I would like to cover by Playwright component tests. The package depends on lots of open source packages and internal packages. All internal dependencies are built from Typescript as importable JS modules with type declarations *.d.ts and source map files.
The package (which I would like to test) is built with vite as vite build successfully. Vite reports that it loaded and transformed around 1000 modules successfully.
However, the build under playwright (1.30.0 version) testing loads over 18K modules and sometimes it crashes with out of memory (eating over 12GB). I have upgraded to Playwright 1.41.2 and it started reporting application build errors like:

> playwright test --grep ${TESTS_FILTER_REGEX:-'.*'} --workers 2

SyntaxError: Unexpected token 'export'

   at ../../../../libs/react-common/src/molecules/controlled-text-input/index.tsx:4

  2 | import { RequiredProperty } from '@partly/js-ex';
  3 | import { FieldValues, useController, UseControllerProps } from 'react-hook-form';
> 4 | import { mergeRefs } from 'react-merge-refs';
    | ^

This error suggests that the build goes to build ALL of the internal modules / dependencies, which is not right, because these modules are already built as importable JS libraries. This is not happening when we do just vite build, but happens when I launch playwright tests.

I have got playwright configuration file which refers to the same vite config file used by the vite build as the following:

ctViteConfig: {
			configFile: resolve(__dirname, './vite.config.ts'),
			resolve: {
				alias: {
					'@': resolve(__dirname, './src'),
					'@assets': resolve(__dirname, './src/assets'),
					'@atoms': resolve(__dirname, './src/app/atoms'),
					'@molecules': resolve(__dirname, './src/app/molecules'),
					'@organisms': resolve(__dirname, './src/app/organisms'),
					'@pages': resolve(__dirname, './src/app/pages'),
					'@templates': resolve(__dirname, './src/app/templates'),
					'@hoc': resolve(__dirname, './src/app/hoc'),
					'@hooks ': resolve(__dirname, './src/app/hooks'),
					'@utils': resolve(__dirname, './src/app/utils')
				}
			}
		}

I can confirm that making changes to the vite config file makes a difference and influences the build under playwright. But I am completely stuck now and can not apply playwright component testing approach. I do not know how make playwright not building all internal packages which are already built and imported as regular node_modules.

I tried changing combinations of exclude and include options, watch modes, etc.. in vite configuration file, but it did not help. And it does not make sense to hange the vite config file as vite build works just fine and our package is bundled correctly. What else should I try to overcome the problem?

The workaround I have is to do vite serve and open the page on localhost in playwright as regular E2E test, but this is not a component testing anymore. I would like to achieve component testing.

Expected behavior

Playwright component tests start after vite build and bundling is complete.

Actual behavior

Playwright loads files outside of package scope and crashes:
version 1.30.0 with out of memory
version 1.41.2 with compile error in the library outside of the package under tests.

Additional context

I can collect and provide logs as required. Please let me know what I should do.

Environment

System:
    OS: Linux 6.5 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 34.58 GB / 62.54 GB
    Container: Yes
  Binaries:
    Node: 16.19.0 - ~/.local/state/fnm_multishells/847493_1707871873348/bin/node
    npm: 8.19.3 - ~/.local/state/fnm_multishells/847493_1707871873348/bin/npm
    pnpm: 6.32.15 - ~/.local/state/fnm_multishells/847493_1707871873348/bin/pnpm
  IDEs:
    VSCode: 1.83.1 - /home/marina/.vscode-server/bin/f1b07bd25dfad64b0167beb15359ae573aecd2cc/bin/remote-cli/code
  Languages:
    Bash: 5.1.16 - /usr/bin/bash

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions