bug: build and test watcher influence each other

[danyball]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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 #4146 because I dont have any problems running both watchers at the same time in the past.

[tanner-reits]

@danyball I confirmed there's some wonky stuff happening here. I'll get this labeled so it's ingested into our backlog so we can take a deeper look. Thanks for reporting!