Jest fails when using this.el.querySelectorAll(':scope > *')

[stevenbriscoeca]

Stencil version:

 @stencil/core@1.13.0 

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Jest doesn't seem to understand scoped.

If I comment :scoped

Those same lines are not in error anymore.

Expected behavior:

I don't expect it to fail. When I was using these versions, I didn't have a problem

    "@stencil/core": "^1.8.11",
    "@stencil/sass": "^1.1.1",
    "@types/jest": "24.0.25",

Steps to reproduce:

add this line in render:

const slotNodes = Array.from(this.el.querySelectorAll(':scope > *'));

Other information:

I have no idea if this is related to jest or stencil.

[runarberg]

I saw the same thing with the disjunction query:

:scope > foo, :scope > bar

But not with :scope > foo nor :scope > bar by it self.

I think the issue is with the Sizzle query library:

jquery/sizzle#237

[manucorporat]

yep, unfortunately stencil uses sizzle under the hood, in the meantime, you can use:

import {Build} from '@stencil/core';

if  (Build.isTesting) {
}

to workaround this issue

[runarberg]

I think this should be reopened. Having specific test logic in production code is a pretty ugly code wart in my opinion. Also how are we supposed to test components that rely on the :scope selector in element queries?

Have you considered swapping out sizzle for another library or a polyfill that implements an up to date standard?

[runarberg]

Note this is how I’m getting around this issue:

import { Build } from '@stencil/core';

// ...

const items = Build.isTesting
  ? Array.from(this.el.children).filter((el) =>
      el.matches('my-component-a, my-component-b'),
    )
  : this.el.querySelectorAll(
      ':scope > my-component-a, :scope > my-component-b',
    );

items.forEach((item) => {
  // Do stuff with item...
});

Note the dual logic, and the latter case is never tested in unit tests. So a type-o in the latter selector will never be detected in automated tests.

[HanneloreVerbraekel]

Managed to get around this issue without having to add test logic inside of production code:

jest.spyOn(component, 'querySelectorAll').mockImplementation(() => {
    return [
        page.doc.createElement('your-element'),
    ];
});

Still not the cleanest solution, but atleast we're not polluting our code! 👍