TypeError: Cannot read property 'filter' of undefined with syncfusion 19 and jest 27

[Oscar Estrada]

Hello,

I am updating my Angular project to Angular 12. And among the updated npm packages I have the following versions:

• "@syncfusion/ej2-angular-grids": "19.2.62",
• "@syncfusion/ej2-angular-navigations": "19.2.62",
• "@syncfusion/ej2-angular-notifications": "19.2.60",
• "@syncfusion/ej2-angular-popups": "19.2.62"

I also work with Jest to run the tests of my application and I have updated this to version 27. I don't know if you have seen any incompatibilities between these versions but in several projects of my solution I find this error when I run the tests:

TypeError: Cannot read property 'filter' of undefined

      at TooltipComponent.e.destroy (../../../../../../node_modules/@syncfusion/ej2-base/dist/ej2-base.umd.min.js:10:80083)

      at TooltipComponent.r.destroy (../../../../../../node_modules/@syncfusion/ej2-base/dist/ej2-base.umd.min.js:10:88967)

      at TooltipComponent.i.destroy (../../../../../../node_modules/@syncfusion/ej2-popups/dist/ej2-popups.umd.min.js:10:92763)

      at ../../../../../../node_modules/@syncfusion/ej2-angular-base/dist/ej2-angular-base.umd.min.js:10:8325

      at timer (../../../../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3090:47)

      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (../../../../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:441:35)

      at AsyncTestZoneSpec.Object.<anonymous>.AsyncTestZoneSpec.onInvokeTask (../../../../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4696:33)

      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (../../../../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3793:43)

      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (../../../../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:440:64)

      at Zone.Object.<anonymous>.Zone.runTask (../../../../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:212:51)

      at Object.<anonymous>.ZoneTask.invokeTask (../../../../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:523:38)

      at ZoneTask.invoke (../../../../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:512:52)

      at data.args.<computed> (../../../../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3070:36)

      at Timeout.task [as _onTimeout] (../../../../../../node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)

Could you help me to solve it? Is it a matter of incompatibilities?

Thanks a lot in advance,

[Joseph Christ Nithin Issack]

Hi Oscar, 

  Greetings from Syncfusion support. 

   Based on your requirement you have updated your project to Angular 12, the Syncfusion package to version 19.2.62 and Jest to version 27. When you run the test cases in jest you are facing a script error.  

   By default `Syncfuion EJ2 version 19.2` does not support `Angular 12`. However the support for Angular 12 will be provided in our Volume 3 main release which is scheduled to be rolled out on September 30^th 2021. 

  We would like to bring the KB in the below link to your knowledge, which guides you to resolve the script errors thrown while running the jest test for the Syncfusion components. 

KB- Link: https://www.syncfusion.com/kb/12418/how-to-clear-script-errors-in-react-jest-testing. 

  We would also like you to follow the below guide lines so that you may avoid failing of the test cases due to data not loading. 

• By default the it takes some time for the grid to be created and the data gets bounded to the grid. So you must write the test cases after the data is bounded to the grid.
• You have to execute next test cases only after one test case is completely finished. So we suggest you to write all your test cases asynchronously.

  If you face any issues while writing the test cases please share the details of the issue, so that we may be able to help you in such situations. 

Regards, 

Joseph I. 

[Joseph Christ Nithin Issack]

Hi Oscar, 

  Thanks for your patience. 

   We are glad to announce that our Essential Javascript2 Volume 3 (v19.3.43) has been rolled out successfully and in that release, we have added the `Angular 12 compatibility support has been provided to our Angular components`. So please update your packages to this version to include the support for Angular 12 in your project. 

               

Release notes:  https://ej2.syncfusion.com/angular/documentation/release-notes/19.3.43/?type=all#common 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 

Joseph I.