Unable to test iX component using React Testing Library and Jest

[umar-shabbir]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

UI testing of iX components is not working with React Testing Library and Jest. For example, testing text displayed by IxContentHeader did not work and produces following error: TestingLibraryElementError: Unable to find an element with the text:

After following instructions in code to produce this issue, you can see that:

• Test case on text displayed with IxContentHeader is failed
• Test case on text displayed with IxTypographyis passed

What type of frontend framework are you seeing the problem on?

React

Which version of iX do you use?

v2.2.1

Code to produce this issue.

1. Clone https://github.com/umar-shabbir/ix-issue-1288
2. Run npm install
3. Run npm test

[danielleroux]

We are using the same test setup maybe this helps you to get your tests running: https://github.com/siemens/ix/blob/main/packages/react/src/tests/toast/toast.spec.tsx

or

import { render, waitFor } from '@testing-library/react';
import React from 'react';
import { describe, it } from 'vitest';
import { deepQuerySelector } from 'shadow-dom-testing-library';
import { IxContentHeader } from '../..';

describe(`content-header`, async () => {
  it(`basic`, async () => {
    const page = render(
      <>
        <IxContentHeader
          headerTitle="Content Header"
          headerSubtitle="My Subtitle"
        >
          Custom Content
        </IxContentHeader>
      </>
    );

    await waitFor(() =>
      expect(deepQuerySelector(page.container, '.subtitle')).toBeInTheDocument()
    );
    expect(deepQuerySelector(page.container, '.subtitle')?.innerText).toEqual(
      'My Subtitle'
    );
  });
});

Please check your testing environment, the react components are no pure react components they use web components to render the content. You have to pierce through this layer IMO it is not necessary to test the internals of the ix components this should not be a part of your unit test.