PivotTableComponent behaves differently under unit test (Jest, JSDom)

[Deniz]

Hi,

I'm trying to write a unit test for a component that uses Pivot Table. I'm using Jest for testing and I think PivotTableComponent renders differently under test. Under the test, it is rendering the text of row headers twice. Only difference is, test environment is using JSDom (a virtual DOM) because there is no actual browser. I have prepared a sample with minimal code. I think this is a common problem when using Pivot Table with testing library. What can be the reason for this? 

This is the component:

import {PivotViewComponent} from "@syncfusion/ej2-react-pivotview";

const worklogData = [
  {
    worklogAuthor: "Deniz Oguz",
    worklogTimeSpentHours: 2,
    issueKey: "TEST-10",
    projectKey: "TEST",
    status: "In Progress",
  },
  {
    worklogAuthor: "Deniz Oguz",
    worklogTimeSpentHours: 3,
    issueKey: "ITSDITSD-5",
    projectKey: "ITSDITSD",
    status: "Resolved",
  },
];

const fieldMapping = [
  {
    name: "worklogAuthor",
    caption: "User",
    dataType: "string",
    type: "Product",
  },
  {
    name: "worklogTimeSpentHours",
    caption: "Time spent (hours)",
    dataType: "number",
    type: "Sum",
  },
  {
    name: "issueKey",
    caption: "Issue key",
    dataType: "string",
    type: "Product",
  },
  {
    name: "projectKey",
    caption: "Project key",
    dataType: "string",
    type: "Product",
  },
  {
    name: "status",
    caption: "Status",
    dataType: "string",
    type: "Product",
  },
];
export function PivotTablex() {
  const dataSourceSettings = {
    dataSource: worklogData,
    showRowGrandTotals: false,
    showColumnGrandTotals: false,
    rows: [fieldMapping.find(field => field.name === "issueKey")],
    columns: [fieldMapping.find(field => field.name === "worklogAuthor")],
    values: [fieldMapping.find(field => field.name === "worklogTimeSpentHours")],
    fieldMapping,
  };
  return (
    // @ts-ignore
    <PivotViewComponent dataSourceSettings={dataSourceSettings} height={"800px"} width={"800px"} />
  );
}



This is the unit test file:

import {PivotTablex} from "./pivot-tablex";
import {render, screen, waitForElementToBeRemoved} from "@testing-library/react";

it("should render", async function () {
  document.body.innerHTML = "<div id='root'></div>";
  render(<PivotTablex />, {container: document.getElementById("root")!});
  await waitForElementToBeRemoved(() => screen.queryByText("No records to display"));
  await screen.findByText("TEST-10", {exact: true}, {timeout: 1000});
});

Rendered in test: look how each row header is repeated.

 

Rendered inside the browser:

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Deniz,

Thanks for contacting Syncfusion support. 

We regret to let you know that currently our react component will only support to ensure the component through terminal. Because, JEST does not have all window functions, we need to mock all functionalities of window and others related to DOM if that are not implemented in the JEST. Thus, we suggest you to use jasmine environment for performing unit test for EJ2 react components. Meanwhile, we have attached the sample that we checked and KB document, screenshot for your reference.

KB document: https://www.syncfusion.com/kb/12418/how-to-clear-script-errors-in-react-jest-testing

Screenshot:

Regards,

Angelin Faith Sheeba.

[Deniz]

Hi Angelin, 

Thanks for the response. I'm aware of this KB article and I have applied them successfully for the testing grid and tree-grid components, dialogs, date pickers. All of them work except Pivot, which behaves differently under the test. I think it is very close to working, it just renders the correct data two times in the table cell. I think it should be easy for your Pivot component developers. I really appreciate it if you can create a ticket for them. 

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Deniz,

We are validating the reported issue at our end. However, please share your runnable application that replicates the problem and the steps to run the JEST test. This would allow us to investigate the reported problem at our end and provide a solution as soon as possible. 

 Regards,

Angelin Faith Sheeba.