Our state of the art Gantt chart


Post by hyco »

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!


Post by mats »

Could you please provide some more information about the error? What property is being accessed?

    TypeError: document[_0x5ecd(...)] is not a function

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


Post by hyco »

Thank you for your response.

Unfortunately, this info isn't present in the error's stack trace and it's triggered from a transpiled file, so, the code is unreadable.

The file is located in node_modules/@bryntum/gantt/gantt.umd.js.


Post by alex.l »

Unfortunately, we don't have any experience with @testing-library. I see the error is about

TypeError: document.createRange is not a function

We use that native function in our code https://developer.mozilla.org/en-US/docs/Web/API/Document/createRange

I suppose test environment have kind of limitation of the scope or some timing issue and document is not exists at the moment?

All the best,
Alex


Post by hyco »

Hi,

Thank you for this clarification, it was very helpful.

The issue is that some methods like createRange aren't implemented in JSDom used by jest.

I'll mock those methods to make my tests run.

Thank you for your help :)


Post by alex.l »

Glad to hear! Let us know if we might be helpful again!

All the best,
Alex


Post by hyco »

Hi Bryntum team,

After the upgrade from 4.3.3 to 4.3.5, I saw that some methods are used in the Gantt product which aren't implemented in jsdom used by Jest.

I've got the below error which isn't readable:

Error: Uncaught [Error: Error: Uncaught [TypeError: _0x291525[_0x5ecd(...)] is not a function]
        at reportException (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.apply (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
        at invokeGuardedCallback (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
        at safelyCallComponentWillUnmount (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:20420:5)
        at commitUnmount (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:20951:11) : TypeError: _0x291525[_0x5ecd(...)] is not a function]
        at reportException (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.apply (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
        at invokeGuardedCallback (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
        at eventHandler (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:23121:9)
        at unstable_runWithPriority (/home/badr/Documents/mia-webapp/node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:646:12) Error: Error: Uncaught [TypeError: _0x291525[_0x5ecd(...)] is not a function]
        at reportException (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.apply (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
        at invokeGuardedCallback (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
        at safelyCallComponentWillUnmount (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:20420:5)
        at commitUnmount (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:20951:11) : TypeError: _0x291525[_0x5ecd(...)] is not a function
        at console.throwConsoleErrors [as error] (/home/badr/Documents/mia-webapp/src/Core/Utils/Test.tsx:14:13)
        at VirtualConsole.<anonymous> (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
        at VirtualConsole.emit (events.js:375:28)
        at reportException (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
        at invokeEventListeners (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.apply (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
        at invokeGuardedCallback (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
        at safelyCallComponentWillUnmount (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:20420:5)
        at commitUnmount (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:20951:11)
        at commitNestedUnmounts (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:21004:5)
        at unmountHostComponents (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:21290:7)
        at commitDeletion (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:21347:5)
        at apply (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:23407:11)
        at HTMLUnknownElement.callCallback (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
        at invokeEventListeners (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/home/badr/Documents/mia-webapp/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.apply (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
        at invokeGuardedCallback (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
        at eventHandler (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:23121:9)
        at Scheduler_runWithPriority (/home/badr/Documents/mia-webapp/node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:646:12)
        at runWithPriority$1 (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
        at commitRoot (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:22990:3)
        at performSyncWorkOnRoot (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:22329:3)
        at scheduleUpdateOnFiber (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
        at updateContainer (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
        at legacyRenderSubtreeIntoContainer (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:26037:5)
        at fn (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:26147:7)
        at unbatchedUpdates (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
        at Object.unmountComponentAtNode (/home/badr/Documents/mia-webapp/node_modules/react-dom/cjs/react-dom.development.js:26146:5)
        at forEach (/home/badr/Documents/mia-webapp/node_modules/@testing-library/react/dist/pure.js:145:21)
        at Set.forEach (<anonymous>)
        at cleanup (/home/badr/Documents/mia-webapp/node_modules/@testing-library/react/dist/pure.js:136:21)
        at Object.<anonymous> (/home/badr/Documents/mia-webapp/node_modules/@testing-library/react/dist/index.js:30:13)
        at Object.asyncJestLifecycle (/home/badr/Documents/mia-webapp/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:53:37)
        at /home/badr/Documents/mia-webapp/node_modules/jest-jasmine2/build/queueRunner.js:43:12
        at new Promise (<anonymous>)
        at mapper (/home/badr/Documents/mia-webapp/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at /home/badr/Documents/mia-webapp/node_modules/jest-jasmine2/build/queueRunner.js:73:41
        at processTicksAndRejections (internal/process/task_queues.js:95:5)

Can you please help me to find out which method isn't implemented?

Thank you :)
Best regards!


Post by mats »

Are you using our trial? Try using our non-minified sources to get sensible error messages?

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


Post by hyco »

Indeed, I'm using a trial version, how can I use the non-minified sources?

Thank you for your response :)


Post by mats »

You'd need to purchase a license same way you did for TaskBoard.

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


Post Reply