Dom-testing-library: How to query getByTestId on Shadowroot element

Created on 31 Mar 2020 · 7Comments · Source: testing-library/dom-testing-library

I just started looking into this lib and I found getByTestId is not working in web component.
Insted of this
const linearTrack = ratingBar.shadowRoot.querySelector('[data-testid="linear-indicator"]');
I want use this but it throwing and error.
const linearRatingBar = getByTestId(ratingBar, 'linear-rating-bar');

question

Source

SunilSalve

All 7 comments

TestingLibraryElementError: Unable to find an element by: [data-testid="linear-rating-bar"]

<body>
  OrxeRatingBar {
    "_changedProperties": Map {},
    "_enableUpdatingResolver": undefined,
    "_instanceProperties": undefined,
    "_needsShimAdoptedStyleSheets": false,
    "_reflectingProperties": undefined,
    "_updatePromise": Promise {},
    "_updateState": 1,
    "label": "",
    "rating": 0,
    "renderRoot": ShadowRoot {},
    "type": "linear",
  }
</body>

  23 |   it('check Parent class for linear rating bar', () => {
  24 |     ratingBar.type = 'linear';
> 25 |     const linearRatingBar = getByTestId(container, 'linear-rating-bar');
     |                             ^
  26 |     expect(linearRatingBar).toHaveClass('linear-track');
  27 |   });
  28 |

  at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:30:19)
  at allQuery (node_modules/@testing-library/dom/dist/query-helpers.js:76:38)
  at node_modules/@testing-library/dom/dist/query-helpers.js:59:17
  at Object.<anonymous> (src/_test_/rating-bar.spec.ts:25:29)

SunilSalve on 31 Mar 2020

Please provide a reproducible example. A codesandbox would be ideal.

eps1lon on 31 Mar 2020

@eps1lon - I am building web component library using Lit Element and I have added Jest as my testing framework. So while in test cases I using '@testing-library/jest-dom/matchers' and also wanted to use "@testing-library/dom" for DOM Selections to maintain standard.

if I am using getByTestId in my webcomponent is not able find element in shadowroot.
currently I am doing this ratingBar.shadowRoot.querySelector('[data-testid="donut-rating-bar"]');

getByTestId(ratingBar, 'linear-rating-bar');

I am getting this ERROR .TestingLibraryElementError: Unable to find an element by: [data-testid="linear-rating-bar"]

import '../';
import { OrxeRatingBar } from '../';
import { toHaveStyle, toHaveTextContent, toHaveClass } from '@testing-library/jest-dom/matchers';

expect.extend({ toHaveStyle, toHaveClass, toHaveTextContent });

describe('orxe-rating-bar', () => {
let ratingBar: OrxeRatingBar;

beforeEach(async function() {
ratingBar = document.createElement('orxe-rating-bar') as OrxeRatingBar;
await document.body.append(ratingBar);
});

afterEach(async function() {
await ratingBar.remove();
});

it('should check default values of properties', async () => {
expect(ratingBar.type).toEqual('linear');
expect(ratingBar.rating).toEqual(0);
expect(ratingBar.label).toBeFalsy();
});

it('check Parent class for linear rating bar', () => {
ratingBar.type = 'linear';
const linearRatingBar = ratingBar.shadowRoot.querySelector('[data-testid="linear-rating-bar"]');
expect(linearRatingBar).toHaveClass('linear-track');
});

it('check Parent class for donut rating bar', async () => {
ratingBar.type = 'donut';
await ratingBar.requestUpdate();
const donutRatingBar = ratingBar.shadowRoot.querySelector('[data-testid="donut-rating-bar"]');
expect(donutRatingBar).toBeTruthy();
});

it('check Rating for Linear rating bar', async () => {
ratingBar.rating = 90;
await ratingBar.requestUpdate();
const ratingValue = ratingBar.shadowRoot.querySelector('[data-testid="linear-rating-value"]');
expect(ratingValue).toHaveTextContent('9');
});

it('check Label for Linear rating bar', async () => {
ratingBar.rating = 90;
ratingBar.label = 'LinearRatingBar';
await ratingBar.requestUpdate();
const ratingLabel = ratingBar.shadowRoot.querySelector('[data-testid="linear-rating-label"]');
expect(ratingLabel).toHaveTextContent('LinearRatingBar');
});

it('check Progress for Linear rating bar', async () => {
ratingBar.rating = 80;
await ratingBar.requestUpdate();
const linearTrack = ratingBar.shadowRoot.querySelector('[data-testid="linear-indicator"]');
expect(linearTrack).toHaveStyle({ width: '80%' });
});

it('check Progress for Linear rating bar when below 0', async () => {
ratingBar.rating = -10;
await ratingBar.requestUpdate();
const linearTrack = ratingBar.shadowRoot.querySelector('[data-testid="linear-indicator"]');
expect(linearTrack).toHaveStyle({ width: '0%' });
});

it('check Progress for Linear rating bar when above 10', async () => {
ratingBar.rating = 150;
await ratingBar.requestUpdate();
const linearTrack = ratingBar.shadowRoot.querySelector('[data-testid="linear-indicator"]');
expect(linearTrack).toHaveStyle({ width: '100%' });
});

it('check Class for Linear rating bar when rating in range 7-8.5', async () => {
ratingBar.rating = 80;
await ratingBar.requestUpdate();
const linearTrack = ratingBar.shadowRoot.querySelector('[data-testid="linear-indicator"]');
expect(linearTrack).toHaveClass('linear-track--great');
});

it('check Class for Linear rating bar when rating above 8.5', async () => {
ratingBar.rating = 90;
await ratingBar.requestUpdate();
const linearTrack = ratingBar.shadowRoot.querySelector('[data-testid="linear-indicator"]');
expect(linearTrack).toHaveClass('linear-track--excellent');
});

it('check Class for Linear rating bar when rating is 1', async () => {
ratingBar.rating = 10;
await ratingBar.requestUpdate();
const linearTrack = ratingBar.shadowRoot.querySelector('[data-testid="linear-indicator"]');
expect(linearTrack).toHaveClass('linear-track--bad');
});

it('check Rating for Donut rating bar', async () => {
ratingBar.rating = 71;
ratingBar.type = 'donut';
await ratingBar.requestUpdate();
const donutRating = ratingBar.shadowRoot.querySelector('[data-testid="donut-rating"]');
expect(donutRating).toHaveTextContent('7.1');
});

it('check Progress for Donut rating bar', async () => {
ratingBar.rating = 50;
ratingBar.type = 'donut';
await ratingBar.requestUpdate();
const donutTrack = ratingBar.shadowRoot.querySelector('[data-testid="donut-track-indicator"]');
expect(donutTrack).toHaveStyle({ 'stroke-dashoffset': 56.52 });
});

it('check Progress for Donut rating bar when below 0', async () => {
ratingBar.rating = -10;
ratingBar.type = 'donut';
await ratingBar.requestUpdate();
const donutTrack = ratingBar.shadowRoot.querySelector('[data-testid="donut-track-indicator"]');
expect(donutTrack).toHaveStyle({ 'stroke-dashoffset': 113.04 });
});

it('check Progress for Donut rating bar when above 10', async () => {
ratingBar.rating = 140;
ratingBar.type = 'donut';
await ratingBar.requestUpdate();
const donutTrack = ratingBar.shadowRoot.querySelector('[data-testid="donut-track-indicator"]');
expect(donutTrack).toHaveStyle({ 'stroke-dashoffset': 0 });
});

it('check Class for Donut rating bar when rating in range 5-7', async () => {
ratingBar.rating = 60;
ratingBar.type = 'donut';
await ratingBar.requestUpdate();
const donutTrack = ratingBar.shadowRoot.querySelector('[data-testid="donut-track-indicator"]');
expect(donutTrack).toHaveClass('donut-track--average');
});

it('check Class for Donut rating bar when rating above 8.5', async () => {
ratingBar.rating = 90;
ratingBar.type = 'donut';
await ratingBar.requestUpdate();
const donutTrack = ratingBar.shadowRoot.querySelector('[data-testid="donut-track-indicator"]');
expect(donutTrack).toHaveClass('donut-track--excellent');
});

it('check Class for Donut rating bar when rating in range 3-5', async () => {
ratingBar.rating = 40;
ratingBar.type = 'donut';
await ratingBar.requestUpdate();
const donutTrack = ratingBar.shadowRoot.querySelector('[data-testid="donut-track-indicator"]');
expect(donutTrack).toHaveClass('donut-track--poor');
});

it('check Class for Donut rating bar when rating in range 1-3', async () => {
ratingBar.rating = 20;
ratingBar.type = 'donut';
await ratingBar.requestUpdate();
const donutTrack = ratingBar.shadowRoot.querySelector('[data-testid="donut-track-indicator"]');
expect(donutTrack).toHaveClass('donut-track--bad');
});

it('check Rating for Decimal Input values for Donut Rating bar', async () => {
ratingBar.rating = 85.3434;
ratingBar.type = 'donut';
await ratingBar.requestUpdate();
const donutRating = ratingBar.shadowRoot.querySelector('[data-testid="donut-rating"]');
expect(donutRating).toHaveTextContent('8.5');
});
z
it('check Rating for Decimal Input values for Linear Rating Bar', async () => {
ratingBar.rating = 75.0123;
ratingBar.type = 'linear';
await ratingBar.requestUpdate();
const LinearRating = ratingBar.shadowRoot.querySelector('[data-testid="linear-rating-value"]');
expect(LinearRating).toHaveTextContent('7.5');
});

SunilSalve on 31 Mar 2020

@SunilSalve Please reduce this as much as possible to a readable example.

eps1lon on 31 Mar 2020

👍1

@eps1lon - https://github.com/testing-library/dom-testing-library/issues/413
I was looking for this solution querySelector is not working in shadowroot

SunilSalve on 3 Apr 2020

@SunilSalve you might be interested in https://www.npmjs.com/package/testing-library__dom...

Westbrook on 12 Jul 2020

👍1

I think we can probably close this now.

kentcdodds on 12 Jul 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Unable to find an accessible element with the role "form"

ruscal · 3Comments

event.currentTarget not populated when fireevent.change happens for an input.

kelly-tock · 4Comments

getByRole can't find button by name if title is ""

EvgenyOrekhov · 3Comments

jest.useFakeTimers() breaks waitForDomChange, waitForElement, waitForElementToBeRemoved due to setTimeout

LaurensBosscher · 4Comments

`queryByTestId`, `getByTestId` use partial case-insensitive text match by default, which is unexpected

sompylasar · 3Comments