bug: build and test watcher influence each other

オープン
#4,477 コメント 1 件 リアクション 1 件 担当者 1 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@tanner-reits がすでに取り組んでいます。

2023年10月4日 から。

評価

この issue はまだ評価されていません。

説明

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.

主要言語
TypeScript
スター
13.2k
フォーク
865
平均マージ
2日 16時間
マージ済み PR(30日)
29

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

stenciljs/core のほかの issue

stenciljs/core の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。