ag-grid Jest testing - this.btFirst.insertAdjacentElement is not a function

Question

I try to test ag-grid component using Jest:

describe('DataGridInternal Component Tests', () => {
  it('includes class names on DataGrid', () => {
    const component = mount(<DataGridInternal {...SAMPLE_PROPS} />);
    expect(component.find('[data-test="ccfk-datagrid"]')).toHaveClassName('csf-material-grid');

  });
});

I get the exception :

TypeError: this.btFirst.insertAdjacentElement is not a function

coming from

node_modules/ag-grid-community/dist/lib/rowModels/pagination/paginationComp.js:49

Once I remark this line the test is passing OK

any idea what is not correct?

I`m using :

"ag-grid-community": "21.2.2",       
"ag-grid-react": "21.2.2",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.14.0",
"enzyme-to-json": "3.3.5"

Answer 1

Solution:

If you're using jest for your test runner, you'll need to upgrade by installing jest-environment-jsdom-fourteen, and adding the following to your jest.config

testEnvironment: 'jest-environment-jsdom-fourteen'

and

If you're using create-react-app,

npm i -D jest-environment-jsdom-fourteen

then in your scripts:

"test": "react-scripts test --env=jsdom-fourteen",

Sources: 1 2

Answer 2

I am facing the same issue as well.

I believe the issue lies in the version of the jsdom package that is being used with Jest testing runner.

insertAdjacentElement was implemented in version 13.1.0 of jsdom as stated in the changelog.

I am running a create-react-app v2, which currently does not use this version of jsdom.