bug: build and test watcher influence each other

Abierto
  • ¿Algo no está bien?
#4,477 1 comentario 1 reacción 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@tanner-reits ya está trabajando en esto.

Desde el 4/10/2023.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
13.2k
Forks
865
Merge medio
2 d 16 h
PR fusionados (30 d)
29

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de stenciljs/core

Todos los issues de stenciljs/core

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.