Hello all!
I just started a Stencil (@stencil/core@1.8.8) project to build a web app.
I want to integrate e2e tests which are supposed to be supported by Stencil out-of-the-box.
But just running the basic example tests throws errors.
The test:
import { newE2EPage } from '@stencil/core/testing';
describe('okta-login', () => {
it('renders', async () => {
const page = await newE2EPage();
await page.setContent('<okta-login></okta-login>');
const element = await page.find('okta-login');
expect(element).toHaveClass('hydrated');
});
});
And I get the errors:
okta-login
× renders (5738ms)
● okta-login › renders
Error: Constructor for "okta-login#undefined" was not found
at initializeComponent (http:/localhost:3334/build/core-c49ddb62.js:2121:23)
at Suite.<anonymous> (src/components/okta-login/login.e2e.ts:4:3)
● okta-login › renders
App did not load in allowed time. Please ensure the content loads a stencil application.
at waitForStencil (node_modules/@stencil/core/dist/testing/index.js:39878:15)
I also tried replacing this
const page = await newE2EPage();
await page.setContent('<okta-login></okta-login>');
with this
const page = await newE2EPage({ url: '/login' });
leaving everything else the same. But then I get
FAIL src/components/okta-login/login.e2e.ts (6.603s)
okta-login
× renders (3123ms)
● okta-login › renders
expect toHaveClass value is null
7 |
8 | const element = await page.find('okta-login');
> 9 | expect(element).toHaveClass('hydrated');
| ^
10 | });
11 |
12 | // it('title should read "Login"', async () => {
at Object.toHaveClass (node_modules/@stencil/core/dist/testing/index.js:37793:15)
at Object.throwingMatcher [as toHaveClass] (node_modules/expect/build/index.js:342:33)
at Object.<anonymous> (src/components/okta-login/login.e2e.ts:9:21)
It’s worth noting that I also have e2e tests for other components which looks exactly the same and works just fine. Some of my components’ tests are working and some not, with no visible reason.
Here are my package.json and stencil.config.ts:
{
"name": "pualinastencil",
"private": true,
"version": "0.0.1",
"description": "Stencil App Starter",
"scripts": {
"build": "stencil build",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --e2e --devtools",
"test.watch": "stencil test --spec --e2e --watchAll",
"generate": "stencil generate"
},
"devDependencies": {
"@stencil/core": "^1.8.8",
"@stencil/router": "^1.0.1",
"@types/jest": "24.0.25",
"@types/puppeteer": "1.19.0",
"jest": "24.9.0",
"jest-cli": "24.9.0",
"puppeteer": "1.19.0"
},
"license": "MIT",
"dependencies": {},
"jest": {
"testTimeout ": 10000
}
}
import { Config } from '@stencil/core';
// https://stenciljs.com/docs/config
export const config: Config = {
globalStyle: 'src/global/app.css',
globalScript: 'src/global/app.ts',
outputTargets: [
{
type: 'www',
// comment the following line to disable service workers in production
serviceWorker: null,
baseUrl: 'https://myapp.local/'
}
],
// testing: {
// browserHeadless: false,
// browserSlowMo: 1000
// }
};
Thanks a lot
Any help would be greatly appreciated.
Update: So I was able to solve Error: Constructor for "okta-login#undefined" was not found by both passing url to the newE2EPage() function and setting the component with setContent() like so:
page = await newE2EPage({ url: '/login' });
page.setContent('<okta-login></okta-login>')
This was needed to instantiate a service used by the component.
But I still get a lot of errors like this:
FAIL src/components/app-header/app-header.e2e.ts (15.905s)
● Console
console.log node_modules/@stencil/core/dist/testing/index.js:39952
Okta init
Location: http://localhost:3333/build/oktaAuth-3883b849.js:24:16
console.error node_modules/@stencil/core/dist/testing/index.js:39952
Failed to load resource: the server responded with a status of 404 (Not Found)
Location: https://dev-662113.okta.com/api/v1/sessions/me
console.log node_modules/@stencil/core/dist/testing/index.js:39952
Okta init
Location: http://localhost:3333/build/oktaAuth-3883b849.js:24:16
console.error node_modules/@stencil/core/dist/testing/index.js:39952
Failed to load resource: the server responded with a status of 404 (Not Found)
Location: https://dev-662113.okta.com/api/v1/sessions/me
● app-header › renders
expected to have css class "hydrated"
12 | it('renders', async () => {
13 | const element = await page.find('app-header');
> 14 | expect(element).toHaveClass('hydrated');
| ^
15 | });
16 |
17 | it('should display "FlowBiz" title', async () => {
at Object.<anonymous> (src/components/app-header/app-header.e2e.ts:14:21)
● app-header › should display "FlowBiz" title
TypeError: Cannot read property 'textContent' of null
17 | it('should display "FlowBiz" title', async () => {
18 | const title = await page.find('app-header >>> h1');
> 19 | expect(title.textContent).toEqual('FlowBiz');
| ^
20 | });
21 | });
22 |
at Object.<anonymous> (src/components/app-header/app-header.e2e.ts:19:18)
Sometime they pass and sometimes fail without me changing a thing…
I’m really clueless as to what might be the reason. Is it some kind of a timeout?
Please tell me if I can provide any further info that might help debug this.
Thanks again!