Hi Bryntum team,
In out project, we have a main test which tests all our app using the library @testing-library
.
The issue is that using a Bryntum component triggers the below error:
TypeError: document[_0x5ecd(...)] is not a function
7 |
8 | // Bryntum libraries
> 9 | import { BryntumGantt } from "@bryntum/gantt-react";
| ^
10 |
11 | import "./App.css";
12 |
at Module../lib/Core/widget/List.js (node_modules/@bryntum/gantt/gantt.umd.js:12:128371)
at _0x409cd7 (node_modules/@bryntum/gantt/gantt.umd.js:10:315349)
at Module../lib/Core/widget/ChipView.js (node_modules/@bryntum/gantt/gantt.umd.js:10:1352476)
at _0x4ca43a (node_modules/@bryntum/gantt/gantt.umd.js:10:315349)
at Module../lib/Core/widget/Combo.js (node_modules/@bryntum/gantt/gantt.umd.js:12:1646)
at _0x2e1c08 (node_modules/@bryntum/gantt/gantt.umd.js:10:315349)
at Module../lib/Core/widget/base/UndoRedoBase.js (node_modules/@bryntum/gantt/gantt.umd.js:13:271714)
at _0x591786 (node_modules/@bryntum/gantt/gantt.umd.js:10:315349)
at Module../webpack/webpack.core.entry.js (node_modules/@bryntum/gantt/gantt.umd.js:82:847998)
at _0x1c387a (node_modules/@bryntum/gantt/gantt.umd.js:10:315349)
at Module../webpack/webpack.entry.js (node_modules/@bryntum/gantt/gantt.umd.js:82:891578)
at _0x8d2b92 (node_modules/@bryntum/gantt/gantt.umd.js:10:315349)
at Module../webpack/webpack.entry.umd.js (node_modules/@bryntum/gantt/gantt.umd.js:82:966969)
at _0x4d1160 (node_modules/@bryntum/gantt/gantt.umd.js:10:315349)
at ../node_modules/process/browser.js (node_modules/@bryntum/gantt/gantt.umd.js:10:317022)
at _0x5b1f54 (node_modules/@bryntum/gantt/gantt.umd.js:10:315145)
at webpackUniversalModuleDefinition (node_modules/@bryntum/gantt/gantt.umd.js:10:314813)
at Object.<anonymous> (node_modules/@bryntum/gantt/gantt.umd.js:10:314651)
at Object.<anonymous> (node_modules/@bryntum/gantt-react/WrapperHelper.js:8:1)
at Object.<anonymous> (node_modules/@bryntum/gantt-react/index.js:4:1)
at Object.<anonymous> (src/App.js:9:1)
at Object.<anonymous> (src/App.test.js:6:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 20.832s
Ran all test suites.
Step to reproduce
1.Download the Gantt basic example coded in React.
2.Add the @testing-library/react
and @testing-library/jest-dom
dependencies.
yarn add -D @testing-library/react @testing-library/jest-dom
3.In src/App.js
, replace Fragment
by div data-testid='app'
<div data-testid='app'>
<BryntumDemoHeader
title="React Basic demo"
href="../../../../../#example-frameworks-react-javascript-basic"
children={<BryntumThemeCombo />}
/>
<BryntumGantt {...ganttConfig} extraData={{ handleEditClick }} />
</div>
4.Add src/App.test.js
file with the below content.
// React libs
import React from 'react';
import { screen, render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
// Components
import App from './App'
test('Load App component', () => {
render(<App />);
expect(screen.getByTestId('app')).toBeInTheDocument();
});
5.Add the below property to package.json
.
"jest": {
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\](?!(@testing-library))/\\.(js|jsx)$"
]
}
6.Execute the yarn test
command.
Than you for your help
Best regards!