ionic-team
Test failed when changing baseUrl on www
Stencil version:
@stencil/[email protected]
I'm submitting a:
- [x] bug report
- [ ] feature request
- [ ] support request
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.
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!
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/[email protected] [email protected] [email protected] [email protected]
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
> [email protected] 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.
Thanks @JStiller! I'm going to get this labelled so the team can further triage this issue
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
Bumping this issue as we are also facing it, and have been for quite some time.
Hi @rwaskiewicz, do you've an update about this issue? We are facing the same, running the latest v4.12.0.
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!