search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.56k stars 784 forks source link

Test failed when changing baseUrl on www #1998

Open kimulaco opened 4 years ago

kimulaco commented 4 years ago

Stencil version:

 @stencil/core@1.7.5

I'm submitting a:

Current behavior:

I am creating a Web Components library with Stencil. npm-scripts related to stencil are not changed from those generated by npm init stencil.

I changed baseUrl. Because we want to deploy WebSite (www) to GitHub Pages. Then, when the E2E test is executed, the path of the component file is wrong and the test fails.

Expected behavior:

It seems that the interpretation of baseUrl is different between build and test.

Related code:

Here is the actual repository. https://github.com/kimulaco/webc-modal

// /stencil.config.ts
import { Config } from '@stencil/core'
import { postcss } from '@stencil/postcss'
import autoprefixer from 'autoprefixer'

export const config: Config = {
  namespace: 'webc-modal',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    },
    {
      type: 'docs-readme'
    },
    {
      type: 'www',
      baseUrl: '/webc-modal',
      serviceWorker: null
    }
  ],
  plugins: [
    postcss({
      plugins: [
        autoprefixer()
      ]
    })
  ]
}
// /src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>webc-modal</title>
  <script type="module" src="/webc-modal/build/webc-modal.esm.js"></script>
  <script nomodule src="/webc-modal/build/webc-modal.js"></script>
</head>
<body>
  ...
</body>
</html>

When yarn start is executed, it reads normally with the following path, so it works normally.

/webc-modal/build/webc-modal.js

However, when yarn test is executed, the following error occurs.

console.error node_modules/@stencil/core/dist/testing/index.js:39876
    Failed to load resource: the server responded with a status of 404 (Not Found)
    Location: http://localhost:3333/webc-modal/webc-modal/build/webc-modal.esm.js

console.error node_modules/@stencil/core/dist/testing/index.js:39710
    requestfailed http://localhost:3333/webc-modal/webc-modal/build/webc-modal.esm.js

console.error node_modules/@stencil/core/dist/testing/index.js:39876
    Failed to load resource: the server responded with a status of 404 (Not Found)
    Location: http://localhost:3333/webc-modal/webc-modal/build/webc-modal.esm.js

console.error node_modules/@stencil/core/dist/testing/index.js:39710
    requestfailed http://localhost:3333/webc-modal/webc-modal/build/webc-modal.esm.js

As you can see from the above error, we are trying to load the next script during the test.

/webc-modal/webc-modal/build/webc-modal.esm.js

However, an error occurs because the directory does not exist.

This error can also be confirmed by CI.

kunegun commented 4 years ago

I have the same issue with the tests!

JStiller commented 2 years ago

I was able to reproduce this problem with version 2.10.0!

splitinfinities commented 2 years ago

Hey folks! Can your help the team out? I need a reproduction repo with the latest version of Stencil here so we can quickly understand what's happening here. Thank you so much!

JStiller commented 2 years ago

Hey @splitinfinities,

I have created a repository to reproduce the problem. Todo this, i used the command npm init stencil to get the default setup of stencil. After completing this step, i tried to run the test command using npm run test. This already fails with the following error message:

Please install missing dev dependencies with either npm or yarn.
npm install --save-dev @types/jest@26.0.21 jest@26.6.3 jest-cli@26.6.3 puppeteer@10.0.0

I was able to fix the problem by following these instructions. So now i should have a working basic installation of stencil. At least the tests are running.

After i got the tests running again. I changed the stencil.config.ts to change the baseUrl from / to /subdirectory as described here. In my case, i use /subdirectory as the name instedt of /docs as described in the documentation. Now i run the test command again, which leads to a problem.

js@home:/mnt/c/dev/source/stencil-e2e-test$ npm run test

> stencil-config-e2e-conflict@0.0.1 test
> stencil test --spec --e2e

[41:50.7]  @stencil/core
[41:50.9]  v2.10.0 🦁
[41:51.1]  testing e2e and spec files
[41:54.4]  build, stencil-config-e2e-conflict, dev mode, started ...
[41:56.1]  transpile started ...
[41:58.7]  transpile finished in 2.57 s
[41:58.7]  copy started ...
[41:58.7]  generate custom elements bundle started ...
[41:58.7]  generate lazy started ...
[41:58.9]  copy finished (0 files) in 233 ms
[41:59.2]  generate custom elements bundle finished in 541 ms
[41:59.5]  generate lazy finished in 770 ms
[41:59.6]  build finished in 5.22 s

[42:00.0]  jest args: --e2e --spec --max-workers=8
 PASS  src/utils/utils.spec.ts
 PASS  src/components/my-component/my-component.spec.ts (5.1 s)
 FAIL  src/components/my-component/my-component.e2e.ts (9.567 s)
  ● Console

    console.error
      Failed to load resource: the server responded with a status of 404 (Not Found) 
      Location: http://localhost:3333/subdirectory/subdirectory/build/stencil-config-e2e-conflict.esm.js

      at t (node_modules/@stencil/core/testing/index.js:3863:67)
      at node_modules/@stencil/core/testing/index.js:3864:5
      at node_modules/puppeteer/vendor/mitt/src/index.ts:88:75
          at Array.map (<anonymous>)
      at Object.emit (node_modules/puppeteer/vendor/mitt/src/index.ts:88:56)
      at Page.emit (node_modules/puppeteer/src/common/EventEmitter.ts:102:18)
      at Page._onLogEntryAdded (node_modules/puppeteer/src/common/Page.ts:718:12)
      at node_modules/puppeteer/src/common/Page.ts:566:49

    console.error
      requestfailed http://localhost:3333/subdirectory/subdirectory/build/stencil-config-e2e-conflict.esm.js

      at node_modules/@stencil/core/testing/index.js:3876:61
      at node_modules/puppeteer/vendor/mitt/src/index.ts:88:75
          at Array.map (<anonymous>)
      at Object.emit (node_modules/puppeteer/vendor/mitt/src/index.ts:88:56)
      at Page.emit (node_modules/puppeteer/src/common/EventEmitter.ts:102:18)
      at node_modules/puppeteer/src/common/Page.ts:547:12
      at node_modules/puppeteer/vendor/mitt/src/index.ts:88:75
          at Array.map (<anonymous>)

    console.error
      Failed to load resource: the server responded with a status of 404 (Not Found) 
      Location: http://localhost:3333/subdirectory/subdirectory/build/stencil-config-e2e-conflict.esm.js

      at t (node_modules/@stencil/core/testing/index.js:3863:67)
      at node_modules/@stencil/core/testing/index.js:3864:5
      at node_modules/puppeteer/vendor/mitt/src/index.ts:88:75
          at Array.map (<anonymous>)
      at Object.emit (node_modules/puppeteer/vendor/mitt/src/index.ts:88:56)
      at Page.emit (node_modules/puppeteer/src/common/EventEmitter.ts:102:18)
      at Page._onLogEntryAdded (node_modules/puppeteer/src/common/Page.ts:718:12)
      at node_modules/puppeteer/src/common/Page.ts:566:49

    console.error
      requestfailed http://localhost:3333/subdirectory/subdirectory/build/stencil-config-e2e-conflict.esm.js

      at node_modules/@stencil/core/testing/index.js:3876:61
      at node_modules/puppeteer/vendor/mitt/src/index.ts:88:75
          at Array.map (<anonymous>)
      at Object.emit (node_modules/puppeteer/vendor/mitt/src/index.ts:88:56)
      at Page.emit (node_modules/puppeteer/src/common/EventEmitter.ts:102:18)
      at node_modules/puppeteer/src/common/Page.ts:547:12
      at node_modules/puppeteer/vendor/mitt/src/index.ts:88:75
          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 __puppeteer_evaluation_script__:2:30
      at ExecutionContext._evaluateInternal (node_modules/puppeteer/src/common/ExecutionContext.ts:273:13)
      at l (node_modules/@stencil/core/testing/index.js:853:14)
      at find (node_modules/@stencil/core/testing/index.js:849:33)
      at Object.<anonymous> (src/components/my-component/my-component.e2e.ts:15:21)

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

As we can see in the report, the e2e tests try to request the following URL:

http://localhost:3333/subdirectory/subdirectory/build/stencil-config-e2e-conflict.esm.js

with /subdirectory/subdirectory, which does not exist. It should be /subdirectory instead.

I running the repo on Windows 10 in the wsl2 with Ubuntu 20.04.1 LTS as OS.

rwaskiewicz commented 2 years ago

Thanks @JStiller! I'm going to get this labelled so the team can further triage this issue

rupa29 commented 2 years ago

@rwaskiewicz is there any update on this? i'm facing the same issue

ju-Skinner commented 2 years ago

I have a similar issue when using a custom outputPath for distributing the compiled assets. The issue only pertains to e2e test and the dev server.

_generated/core is the directory I output compiled (built) files

console.error
      Failed to load resource: the server responded with a status of 404 (Not Found) 
      Location: http://localhost:4640/_generated/core/dist/ds-core/ds-core.esm.js
nel11211 commented 1 year ago

Bumping this issue as we are also facing it, and have been for quite some time.

marcomontalbano commented 9 months ago

Hi @rwaskiewicz, do you've an update about this issue? We are facing the same, running the latest v4.12.0.

rwaskiewicz commented 9 months ago

Hey folks,

I do not have an update on this issue. Please do me a favor and add 👍's to the issue summary to upvote it if running into this issue. This makes it more likely to be properly counted when we prioritize issues.

PRs welcome too!

Thanks!