bug: build and test watcher influence each other

Aperta
  • Qualcosa non va?
#4,477 1 commento 1 reazione 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@tanner-reits ci sta già lavorando.

Dal 4/10/2023.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

Bug: Validated
Prerequisites
Stencil Version

3.3.1

Current Behavior

Running a devServer and the test watcher at the same time having some problems. It seems that they influence each other.

My use case: I am developing a new tests by running test.watch. To see how the browser interprets the html and to simulate the test I am running a devServer at the same time.

  • Changing something in *.tsx --> errors in test.watch output
  • Changing something in *.e2e.ts --> something happens in npm start output
Expected Behavior
  • Changing something in *.tsx --> no errors
  • Changing something in *.e2e.ts --> nothing should happen in npm start output
System Info
System: node 16.17.0
    Platform: darwin (22.5.0)
   CPU Model: Apple M1 Max (10 cpus)
    Compiler: /stencil-component-starter/node_modules/@stencil/core/compiler/stencil.js
       Build: 1685732213
     Stencil: 3.3.1 🎀
  TypeScript: 5.0.4
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.17.6
Steps to Reproduce
  1. clone https://github.com/ionic-team/stencil-component-starter.git and run npm i
  2. npm run test.watch
  3. npm run start --> some warnings occours
  4. add @Prop() new: string; to my-component.tsx
  5. tests will fail and show multiple errors

Warning in step 3:

console.info
      %cstencil color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px Running in development mode. 
      Location: http://localhost:3333/build/index-319682d3.js:3285:41
      at t (node_modules/@stencil/core/testing/index.js:4191:67)
          at Array.map (<anonymous>)

Errors in step 5:

 FAIL  src/components/my-component/my-component.e2e.ts
  ● Console

    console.error
      Failed to load resource: the server responded with a status of 404 (Not Found) 
      Location: http://localhost:3333/build/index-89c177c8.js

      at t (node_modules/@stencil/core/testing/index.js:4191:67)
      at node_modules/@stencil/core/testing/index.js:4192:5
      at node_modules/puppeteer-core/lib/cjs/third_party/mitt/index.js:3:248
          at Array.map (<anonymous>)
      at Object.emit (node_modules/puppeteer-core/lib/cjs/third_party/mitt/index.js:3:232)
      at CDPPage.emit (node_modules/puppeteer-core/src/common/EventEmitter.ts:118:18)
      at CDPPage._CDPPage_onLogEntryAdded (node_modules/puppeteer-core/src/common/Page.ts:430:12)
      at node_modules/puppeteer-core/src/common/Page.ts:251:35

    console.error
      requestfailed http://localhost:3333/build/index-89c177c8.js

      at node_modules/@stencil/core/testing/index.js:4205:12
      at node_modules/puppeteer-core/lib/cjs/third_party/mitt/index.js:3:248
          at Array.map (<anonymous>)
      at Object.emit (node_modules/puppeteer-core/lib/cjs/third_party/mitt/index.js:3:232)
      at CDPPage.emit (node_modules/puppeteer-core/src/common/EventEmitter.ts:118:18)
      at node_modules/puppeteer-core/src/common/Page.ts:220:19
      at node_modules/puppeteer-core/lib/cjs/third_party/mitt/index.js:3:248
          at Array.map (<anonymous>)

    console.error
      Failed to load resource: the server responded with a status of 404 (Not Found) 
      Location: http://localhost:3333/build/index-89c177c8.js

      at t (node_modules/@stencil/core/testing/index.js:4191:67)
      at node_modules/@stencil/core/testing/index.js:4192:5
      at node_modules/puppeteer-core/lib/cjs/third_party/mitt/index.js:3:248
          at Array.map (<anonymous>)
      at Object.emit (node_modules/puppeteer-core/lib/cjs/third_party/mitt/index.js:3:232)
      at CDPPage.emit (node_modules/puppeteer-core/src/common/EventEmitter.ts:118:18)
      at CDPPage._CDPPage_onLogEntryAdded (node_modules/puppeteer-core/src/common/Page.ts:430:12)
      at node_modules/puppeteer-core/src/common/Page.ts:251:35

    console.error
      requestfailed http://localhost:3333/build/index-89c177c8.js

      at node_modules/@stencil/core/testing/index.js:4205:12
      at node_modules/puppeteer-core/lib/cjs/third_party/mitt/index.js:3:248
          at Array.map (<anonymous>)
      at Object.emit (node_modules/puppeteer-core/lib/cjs/third_party/mitt/index.js:3:232)
      at CDPPage.emit (node_modules/puppeteer-core/src/common/EventEmitter.ts:118:18)
      at node_modules/puppeteer-core/src/common/Page.ts:220:19
      at node_modules/puppeteer-core/lib/cjs/third_party/mitt/index.js:3:248
          at Array.map (<anonymous>)

  ● my-component › renders

    expected to have css class "hydrated"

       7 |     await page.setContent('<my-component></my-component>');
       8 |     const element = await page.find('my-component');
    >  9 |     expect(element).toHaveClass('hydrated');
         |                     ^
      10 |   });
      11 |
      12 |   it('renders changes to the name data', async () => {

      at Object.<anonymous> (src/components/my-component/my-component.e2e.ts:9:21)

  ● my-component › renders changes to the name data

    Evaluation failed: Error: shadow root does not exist for element: my-component

      at pptr:/__puppeteer_evaluation_script__:2:30
      at ExecutionContext._ExecutionContext_evaluate (node_modules/puppeteer-core/src/common/ExecutionContext.ts:325:13)
      at l (node_modules/@stencil/core/testing/index.js:640:14)
      at find (node_modules/@stencil/core/testing/index.js:636:33)
      at Object.<anonymous> (src/components/my-component/my-component.e2e.ts:17:21)

Test Suites: 1 failed, 2 passed, 3 total
Tests:       2 failed, 6 passed, 8 total
Snapshots:   0 total
Time:        2.105 s
Ran all test suites.
Code Reproduction URL

notyet

Additional Information

Maybe related to https://github.com/ionic-team/stencil/pull/4146 because I dont have any problems running both watchers at the same time in the past.

Lingua principale
TypeScript
Stelle
13.2k
Fork
865
Merge medio
2g 16h
PR unite (30g)
29

Preparare l'ambiente

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 stenciljs/core

Tutte le issue di stenciljs/core

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.