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:
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.
Hi William,
Thank you for your patience. Based on your requirements, we checked your reported problem by writing Jest test case for our React pivot table, and it has passed successfully. Please refer to the sample in the attached file. After extracting the sample, install the necessary packages using the `npm install` command, and then run the test case using the `npm test` command.
Output screenshot:
Please let us know if you have any concerns.
Regards,
Sridhar Karunakaran.
Attachment: TestCase_2e7fbc05.zip
