We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

PivotTableComponent behaves differently under unit test (Jest, JSDom)

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:




6 Replies

AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team February 21, 2023 02:01 PM UTC

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.



DE Deniz February 21, 2023 02:09 PM UTC

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. 



AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team February 22, 2023 02:09 PM UTC

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.



WH William Halls July 10, 2024 02:18 PM UTC

Hi,

Is there any update on this potentially working with Jest please?


Thanks



SK Sridhar Karunakaran Syncfusion Team July 11, 2024 03:40 PM UTC

Hi William,


We apologies for the delay. We are currently evaluating your query with our latest version (26.1.40) and will provide an update within two business days (July 15, 2024).


Regards,

Sridhar Karunakaran.



SK Sridhar Karunakaran Syncfusion Team July 15, 2024 02:54 PM UTC

Hi William,


Thank you for your patience. We are currently validating your requirement by writing JEST test cases for the EJ2 React Pivot Table. Consequently, we require additional time to validate this requirement and we will update the details in two business days (July 17, 2024).


We appreciate your patience until then.

Regards,

Sridhar Karunakaran.


Loader.
Live Chat Icon For mobile
Up arrow icon