Skip to content

fix(test): correct css-module E2E fixture setup and esbuild config#218

Merged
mohamedmansour merged 1 commit intomainfrom
chore/fix-e2e
Apr 11, 2026
Merged

fix(test): correct css-module E2E fixture setup and esbuild config#218
mohamedmansour merged 1 commit intomainfrom
chore/fix-e2e

Conversation

@mohamedmansour
Copy link
Copy Markdown
Contributor

The css-module Playwright tests were failing because of three test infrastructure issues:

  1. Missing SSR content in fixture HTML: Both fixture.html and fixture-shadow.html had empty elements. The shadow DOM fixture was also missing the declarative shadow root. Without SSR content the framework treated the elements as client-created instead of hydrating them.

  2. esbuild stripping import attributes: The fixture build used target es2022 without opting into import-attributes support. esbuild silently removed { with: { type: 'css' } } from dynamic import() calls in the compiled bundle, causing the browser to reject CSS module imports as JavaScript (MIME type mismatch).

  3. Missing async wait in test assertions: injectModuleStyle uses import().then() to adopt stylesheets on dynamically-created components. The test checked computed styles synchronously before the promise resolved. Switched to Playwright's toPass() polling to wait for async style injection.

The css-module Playwright tests were failing because of three test
infrastructure issues:

1. Missing SSR content in fixture HTML: Both fixture.html and
   fixture-shadow.html had empty <test-module-host> elements. The shadow
   DOM fixture was also missing the declarative shadow root with
   shadowrootadoptedstylesheets. Without SSR content the framework
   treated the elements as client-created instead of hydrating them.

2. esbuild stripping import attributes: The fixture build used
   target es2022 without opting into import-attributes support. esbuild
   silently removed { with: { type: 'css' } } from dynamic import()
   calls in the compiled bundle, causing the browser to reject CSS
   module imports as JavaScript (MIME type mismatch).

3. Missing async wait in test assertions: injectModuleStyle uses
   import().then() to adopt stylesheets on dynamically-created
   components. The test checked computed styles synchronously before
   the promise resolved. Switched to Playwright toPass() polling.

Also remove the injectModuleStyle Node.js unit tests — they mocked
DOM queries for an implementation that uses browser-only CSS module
imports. The Playwright E2E tests provide real browser coverage.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@mohamedmansour mohamedmansour merged commit 726f0b2 into main Apr 11, 2026
21 checks passed
@mohamedmansour mohamedmansour deleted the chore/fix-e2e branch April 11, 2026 04:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants