Skip to content

Tooltip: Can not be rendered in Test with react-testing-library #4370

Closed
@JulianBu

Description

@JulianBu

Which generators are impacted?

  • All
  • HTML
  • React
  • Angular
  • Vue
  • Web components
  • Power Apps

Reproduction case

While rendering while the application is running everything works fine, but if we want to test our components with the DB Tooltip we get the following error. This happens already by rendering with react-testing-library

we use "@db-ux/react-core-components": "2.2.1"

ReferenceError: IntersectionObserver is not defined
    at C:\Users\\IdeaProjects\fast-frontend\node_modules\@db-ux\react-core-components\dist\components\tooltip\tooltip.js:85:30
    at Object.react-stack-bottom-frame (C:\Users\IdeaProjects\fast-frontend\node_modules\react-dom\cjs\react-dom-client.development.js:23949:20)
    at runWithFiberInDEV (C:\Users\IdeaProjects\fast-frontend\node_modules\react-dom\cjs\react-dom-client.development.js:1522:13)
    at commitHookEffectListMount (C:\Users\IdeaProjects\fast-frontend\node_modules\react-dom\cjs\react-dom-client.development.js:11905:29)
    at commitHookPassiveMountEffects (C:\Users\IdeaProjects\fast-frontend\node_modules\react-dom\cjs\react-dom-client.development.js:12028:11)
    at commitPassiveMountOnFiber (C:\Users\IdeaProjects\fast-frontend\node_modules\react-dom\cjs\react-dom-client.development.js:13841:13)
    at recursivelyTraversePassiveMountEffects (C:\Users\IdeaProjects\fast-frontend\node_modules\react-dom\cjs\react-dom-client.development.js:13815:11)
    at commitPassiveMountOnFiber (C:\Users\IdeaProjects\fast-frontend\node_modules\react-dom\cjs\react-dom-client.development.js:13957:11)
    at recursivelyTraversePassiveMountEffects (C:\Users\IdeaProjects\fast-frontend\node_modules\react-dom\cjs\react-dom-client.development.js:13815:11)
    at commitPassiveMountOnFiber (C:\Users\IdeaProjects\fast-frontend\node_modules\react-dom\cjs\react-dom-client.development.js:13834:11)

The Test looks like

import React from "react";
import { render, screen } from "@testing-library/react";

it("shows tooltip", () => {  
    render(<ElementHighlighter {...defaultProps} />);  
    expect(screen.getByText("Test Tooltip"));
});

Expected Behaviour

Expected would be the component renders correctly.

Screenshots

No response

Browser version

Chrome

Add any other context about the problem here.

No response

Metadata

Metadata

Assignees

Type

Projects

Status

✅ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions