Importing "screen" giving me the error.

[pct-fahmed]

Hello, I am using this library in my Ioinic Angular project.

When I import like below, this library gives me the error while running the test:

import { screen } from 'shadow-dom-testing-library';

The error looks like following:

` Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

....................

SyntaxError: Cannot use import statement outside a module

  14 | } from '@testing-library/dom';
  15 |
> 16 | import { screen } from 'shadow-dom-testing-library';`

I have following libraries:

"@ionic/angular": "6.2.5", "@ionic/core": "6.2.5", "@angular/core": "~14.1.1", "shadow-dom-testing-library": "^1.1.4", "@testing-library/dom": "^8.17.1", jsdom@16.7.0, npm 6, node 12

[KonnorRogers]

I see "node 12" but are you using node >= 12.17?

This package ships ESModules (Which maybe I should revisit and ship a CJS equivalent for Jest)

The other option is to add "shadow-dom-testing-library" to the "transformIgnorePatterns" for Jest so that it gets transformed.

"transformIgnorePatterns": ["node_modules/?!(shadow-dom-testing-library)"]

[pct-fahmed]

My node version is v18.8.0. And I also added the following in my jest.config.ts file. But does not solve my problem. I also tried with your source code (from github). Showdow-dom does not works. transformIgnorePatterns: [ 'node_modules/(?!.*\\.mjs$)', 'node_modules/?!(shadow-dom-testing-library)', ],

I tried with the following code:

const htmlElement = screen.getAllByShadowTestId('button-submit')[0]; expect(htmlElement).toBeInTheDocument(); await userEvent.click(htmlElement); await waitFor(() => expect(submitAction).toHaveBeenCalledWith(loginData));

For my ionic element:

<ion-button data-testid="button-submit" type="submit" size="large">Anmelden</ion-button>

Which gives me the same error like normal testing-library. I posted the same problem in stackoverflow .

[KonnorRogers]

I just released a CJS import path in v1.1.5

https://github.com/ParamagicDev/shadow-dom-testing-library/commit/b4aff6be7997324f31f9ee5a6e4a71c4ab2eaca6

Let me know if upgrading fixes for you.

[pct-fahmed]

Thanks, It solve the importing issue. But does not solve my problem.

const btn = screen.getByShadowRole('button'); expect(btn).toBeInTheDocument();

The error I am getting is.

` TestingLibraryElementError: Found multiple elements with the role of: button

Here are the matching elements:

Ignored nodes: comments, script, style
<ion-button
  class="login-submit-btt"
  data-testid="button-submit"
  ng-reflect-size="large"
  ng-reflect-type="submit"
  role="button"
  size="large"
  type="submit"
>
  Anmelden
</ion-button>

Ignored nodes: comments, script, style
<ion-button
  class="login-submit-btt"
  data-testid="button-submit"
  ng-reflect-size="large"
  ng-reflect-type="submit"
  role="button"
  size="large"
  type="submit"
>
  Anmelden
</ion-button>`

But Shadow dom is not working. same problem like normal library .

[KonnorRogers]

If you have a reproduction I could look at that would help me immensely. I would also try not putting role="button" on there since itll search the container for the role too.

[pct-fahmed]

Reproduction also an issue. But that is not my main problem. My problem is I can not click or type in any ion-input

Example UI component:

 <input data-testid="txt" class="login-username-input"/>
<ion-input data-testid="ion-txt" class="login-username-input"></ion-input>

The code works for me : (screen is from your lib). Because it is not an Ionic component.

import { screen } from 'shadow-dom-testing-library';
......
   const input = screen.getByTestId('txt');
   expect(input).toBeInTheDocument();
   await userEvent.type(input, 'test');
   expect(input).toHaveValue('test');

 **output** 
-----------
Test Suites: 1 passed, 1 total
Tests:       2 skipped, 1 passed, 3 total
Snapshots:   0 total
Time:        2.4 s, estimated 3 s

The code does not work:

   const ioninput = screen.getByTestId('ion-txt');
   expect(ioninput).toBeInTheDocument();
   await userEvent.type(ioninput, 'test');
   expect(ioninput).toHaveValue('test');

output: 
------------
 expect(element).toHaveValue(test)

    Expected the element to have value:
      test
    Received:
      undefined

The code gives me duplicate (by using shadow api)

  const shadowIon = screen.getByShadowTestId('ion-txt');
  expect(shadowIon).toBeInTheDocument();
  await userEvent.type(shadowIon, 'test');
  expect(shadowIon).toHaveValue('test');

**output**
-----------
    TestingLibraryElementError: Found multiple elements with the test id of: ion-txt

    Here are the matching elements:

    Ignored nodes: comments, script, style
    <ion-input
      class="login-username-input"
      data-testid="ion-txt"
    />

    Ignored nodes: comments, script, style
    <ion-input
      class="login-username-input"
      data-testid="ion-txt"
    />

I also tried the follow:

  const allByShadowRule = screen.getAllByShadowTestId('ion-txt')[0];
  expect(allByShadowRule).toBeInTheDocument();
  await userEvent.type(allByShadowRule, 'test');
  expect(allByShadowRule).toHaveValue('test');

**output**

    expect(element).toHaveValue(test)

    Expected the element to have value:
      test
    Received:
      undefined

[KonnorRogers]

I fixed somethings regarding duplicate nodes. Let me know if it solves it for you in v1.1.8.

https://github.com/KonnorRogers/shadow-dom-testing-library/pull/11