[data grid] Cannot use data grid with react testing library

[benparks1976]

[data grid] Cannot use data grid with react testing library

[JCQuintas]

Hi @benparks1976, the tests are green on my side with the example code you provided. I've noticed you are using node 14, which doesn't support the array.at() function. I would suggest upgrading your node to a more recent version, at is available from 16.6.

Otherwise you could also add a polyfill. eg: https://www.npmjs.com/package/array.prototype.at

[michelengelen]

Hey @benparks1976 ... my colleague @JCQuintas noticed that you were using the old syntax.
If you change the code in your example to this it should work:

import React from "react";
import Demo from "../demo";
import { render } from "@testing-library/react";

describe("when rendering the data grid", () => {
    it("should render the table columns", async () => {
        const {findAllByRole} = render(<Demo/>)

        const headers = await findAllByRole("columnheader")!;

        expect(headers[1].textContent).toBe("Serial number");
        expect(headers[2].textContent).toBe("Model name");
    });
})

Could you try that please?

[benparks1976]

Hi, thanks for the follow up. I tried your suggestion and I still got the same issue:

[michelengelen]

It does work on my machine:

Did you try a fresh install?

[benparks1976]

Thanks @JCQuintas, this is the problem. Thanks all for your help.

[benparks1976]

Closing...

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@benparks1976: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.