Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: testing Stencil lib within external project with Jest not working since shadowDomShim was removed #5262

Closed
3 tasks done
zerock54 opened this issue Jan 15, 2024 · 4 comments
Closed
3 tasks done

bug: testing Stencil lib within external project with Jest not working since shadowDomShim was removed #5262

zerock54 opened this issue Jan 15, 2024 · 4 comments

Comments

@zerock54
Copy link

Prerequisites

Stencil Version

4

Current Behavior

Hi,

I have an app which uses a Stencil library as a Design System.
This app is tested with Jest and testing-library.
I was using the shadowDomShim extra config to make the shadow DOM available within Jest but, since this field is now gone, the content of my components configured with {shadow: true} is empty

Expected Behavior

The shadow dom appears as normal within Jest

System Info

No response

Steps to Reproduce

Code Reproduction URL

https://github.com/zerock54/stencil-jest-shadow-dom/tree/main

Additional Information

Everything was fine with Stencil 3 by setting __deprecated__shadowDomShim: true

Is there a way to make it work the same way now that this config is gone in Stencil 4 ?

Thanks
@ionitron-bot ionitron-bot bot added the triage label Jan 15, 2024
@rwaskiewicz rwaskiewicz self-assigned this Jan 17, 2024
@rwaskiewicz
Copy link
Contributor

Hey @zerock54 👋

Thanks for the report! I'm currently seeing the following error when I run the steps in the README file of the reproduction case:

> ng test

 FAIL  src/app/app.component.spec.ts
  ● Test suite failed to run

    setup-jest.ts:4:1 - error TS2708: Cannot use namespace 'jest' as a value.

    4 jest.setTimeout(20000);
      ~~~~
    setup-jest.ts:6:1 - error TS2304: Cannot find name 'beforeEach'.

    6 beforeEach(async () => {
      ~~~~~~~~~~

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.782 s

I don't think this is the error you're seeing, based on the context of this issue report. Can you please confirm/not if this is what you're seeing?

@zerock54
Copy link
Author

zerock54 commented Jan 18, 2024 •
edited
Loading

Hey @rwaskiewicz,

Sorry about that

I just sent a fix

Thanks :)

@rwaskiewicz
Copy link
Contributor

Thanks!

I'm now seeing the following error, which I think matches a little more closely with the issue you reported:

npm t

> bug-stencil-jest@0.0.0 test
> ng test

 FAIL  src/app/app.component.spec.ts (10.424 s)
  AppComponent
    ✕ should create (10090 ms)

  ● AppComponent › should create

    Unable to find an element with the text: Hello, World! I'm nicolas. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, script, style
    <body>
      <div
        id="root0"
        ng-version="17.0.0"
      >
        <my-component
          class="hydrated"
          first="nicolas"
        />
      </div>
    </body>

      19 |     await setup();
      20 |
    > 21 |     await waitFor(
         |                  ^
      22 |       () => {
      23 |         expect(screen.getByText("Hello, World! I'm nicolas")).toBeInTheDocument();
      24 |       },

      at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:163:27)
      at src/app/app.component.spec.ts:21:18

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        10.65 s
Ran all test suites.

Since Stencil is no longer shimming the Shadow DOM, it appears that testing-library does not know how to "pierce" or read into our web components.

Full Disclosure: I'm far from a testing-library expert and haven't used it myself.

As I understand it, testing-library itself doesn't support the Shadow DOM at this time (testing-library/dom-testing-library#413). There does however, appear to be a library that can help bridge the gap here - https://github.com/KonnorRogers/shadow-dom-testing-library/tree/main

I was able to get your reproduction case working with shadow-dom-testing-library with minimal changes here (although these might not be optimal in terms of performance and idiomatic testing-library code, I'm not well-versed in the library):

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { render, screen, waitFor } from '@testing-library/angular';
+import { render, waitFor } from '@testing-library/angular';
+import { screen } from "shadow-dom-testing-library";
 
 describe('AppComponent', () => {
   const setup = async (): Promise<{
@@ -20,7 +21,7 @@ describe('AppComponent', () => {
 
     await waitFor(
       () => {
-        expect(screen.getByText("Hello, World! I'm nicolas")).toBeInTheDocument();
+        expect(screen.getByShadowText("Hello, World! I'm nicolas")).toBeInTheDocument();
       },
       { timeout: 10000 }
     );

Let me know if that works for your use case!

@rwaskiewicz rwaskiewicz added the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Jan 18, 2024
@ionitron-bot ionitron-bot bot removed the triage label Jan 18, 2024
@rwaskiewicz rwaskiewicz removed their assignment Jan 18, 2024
@zerock54
Copy link
Author

Hi @rwaskiewicz,

I tested it and it looks to work great. I completely missed this lib during my first investigations...
I guess it will suit my needs for now

Thank you for your time !

@ionitron-bot ionitron-bot bot removed the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Jan 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rwaskiewicz @zerock54