[Bug]: test-utils default export is not createWrapper in native ES modules

Aperta Adatta ai principianti
  • Qualcosa non va?
#5,261 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
72/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
node.js, typescript
Ambito
tooling

Direzione di ricerca

Inizia da src/converter/generate-component-finders.ts e verifica come defaultExport genera i selettori e i punti di ingresso delle utility di test del DOM. Controlla l’output generato per entrambi i punti di ingresso e conferma che Node ESM possa importare la funzione denominata createWrapper, mentre l’export predefinito esistente continui a funzionare. Il lavoro è concluso quando entrambi gli import si comportano come descritto nell’issue.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug
Browser

No response

Package version

@cloudscape-design/components 3.0.1410 (latest), Node.js 24

React version

No response

Description
Summary

In a native ES module, import createWrapper from "@cloudscape-design/components/test-utils/selectors" does not give you the createWrapper function. Calling it throws TypeError: createWrapper is not a function. The same applies to test-utils/dom.

Steps to reproduce

  1. Create a project with "type": "module" in package.json, and install @cloudscape-design/components.

  2. Add test.js:

    import createWrapper from "@cloudscape-design/components/test-utils/selectors";

console.log(typeof createWrapper); // "object"
createWrapper(); // TypeError: createWrapper is not a function

  3. Run node test.js.

Actual result

createWrapper is an object, not a function. The function is at createWrapper.default, so ESM code has to write:

import selectors from "@cloudscape-design/components/test-utils/selectors";
const { default: createWrapper } = selectors;
Expected result

ESM code can import the function directly:

import { createWrapper } from "@cloudscape-design/components/test-utils/selectors";
Cause

test-utils/selectors/index.js and test-utils/dom/index.js are CommonJS, and their only export of the function is exports.default = wrapper. When an ES module imports a CommonJS file, Node gives the default import the whole module.exports object. It does not use exports.default. So the default import is the object that holds every wrapper class, and the function is one property on it.

TypeScript does not always catch this. With "moduleResolution": "bundler", the default import type-checks as the function and fails only at run time. With "moduleResolution": "nodenext", TypeScript matches Node and reports the error.

Proposed fix

In src/converter/generate-component-finders.ts, add a named export after both wrapper functions in defaultExport:

export { wrapper as createWrapper };

tsc compiles this to exports.createWrapper = wrapper. Node detects that as a named export, so import { createWrapper } works in ESM. The default export does not change, so existing code keeps working.

Related
Source code

No response

Reproduction

No response

Code of Conduct
Lingua principale
TypeScript
Stelle
2.7k
Fork
248
Merge medio
2g 4h
PR unite (30g)
93

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di cloudscape-design/components

Tutte le issue di cloudscape-design/components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.