Vitest Not working

[Bronya HSR]

I am trying to write tests using vitest it's always giving me the error 

named export 'accumulationannotation' not found. the requested module '@syncfusion/ej2-charts' is a commonjs module, which may not support all module.exports as named exports.

How do I fix this error? 

[Nishanthi Panner Selvam]

Bronya,

We have analyzed your reported query. It appears that the issue with 'accumulationannotation' not being found may be due to the module not being injected in your app.module.ts. We recommend injecting all the required modules, such as AccumulationAnnotationService to resolve this issue.

We have attached code-snippet, sample and screenshot for your reference.

Code-snippet:

import { AccumulationAnnotationService } from '@syncfusion/ej2-angular-charts';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule, ChartAllModule, AccumulationChartModule

  ],

  providers: [AccumulationAnnotationService],

  bootstrap: [AppComponent]

})

Screenshot:

Alternatively, you can import the ‘AccumulationChartAllModule’ in the app.module.ts' file, which will include all the necessary modules.

If issue still persists, we request you to share the following information which will be helpful for further analysis and provide you the solution sooner.

• Try to reproduce the reported scenario in above sample.
• Please share your sample (or) code snippet with full configurations.
• Share the details if you have done any other customization in your sample.

Regards,

Nishanthi

Attachment: angular_78073afc.zip

[Bronya HSR]

I think the issue is with standalone components.

i have attached a sample project. install packages and run ng test or install vitest globally and run vitest run 

you will see the error. 

Attachment: angular_514b173.zip

[Bronya HSR]

In my real project i am getting this error. it has same configuration as the test.

[Swetha Babu]

Bronya,

We have checked the provided sample by following the steps to replicate the reported scenario. Unfortunately, we are unable to replicate the reported scenario. When we run the vitest run command, we have got the following error.

Please find the below screenshot for your reference.

Can you please confirm us whether this is the error that you are reporting. If not, please provide us the replication steps to replicate the reported scenario or any screen capture video of replicating the reported scenario. Please modify the attached sample to replicate the reported scenario. It will be helpful for us to analyze further and assist you better.

Attachment: AngularSample_40e74d25.zip

[Bronya HSR]

please update vitest.config.mts with this . you will see this error

/// <reference types="vitest" />

import angular from '@analogjs/vite-plugin-angular';

import tsconfigPaths from 'vite-tsconfig-paths';

import { defineConfig } from 'vite';

// https://vitejs.dev/config/

export default defineConfig(({ mode }) => {

  return {

    plugins: [

      angular(), tsconfigPaths()

    ],

    test: {

      globals: true,

      environment: 'jsdom',

      setupFiles: ['src/test-setup.ts'],

      include: ['**/*.spec.ts'],

      reporters: ['verbose'],

      pool: 'threads',

      poolOptions: {

        threads: {

          maxThreads: 10,

          minThreads: 2,

          useAtomics: true

        }

      },

      server: {

        deps: {

          inline: [

            "@syncfusion/ej2-angular-base",

          ]

        }

      }

    },

    define: {

      'import.meta.vitest': mode !== 'production',

    },

  };

});

[Bronya HSR]

please find the updated sample

Attachment: AngularSample_82d0b898.zip

[Bronya HSR]

The error depends on inlining syncfusion packages

if i do syncfusion/ej2-angular-charts its giving me error cannot use imports outside of an module

if i use syncfusion/ejs-angular-base its giving me the above error

[Swetha Babu]

Bronya,

We are validating the reported scenario and update you with further details within two business days. We appreciate your patience until then.

[Nishanthi Panner Selvam]

Bronya,

Our Syncfusion packages provide support from Angular v7 to Angular v18 with the same base packages. Thus, it holds both Commonjs and ES module packages within it. Vitest follows the Node.js resolution, which does not check for module property. So Vitest takes the Commonjs package and causes issues.

Thus, Syncfusion Angular packages do not support with Vitest; instead, you can use the Jest framework with Angular for testing. Which will work fine.

For your reference, we have attached a sample for Angular + Jest below:

Please let us know if you have any quires.

Regards,

Nishanthi

Attachment: Demo_1_b5607354.zip

[Bronya HSR]

thanks for the sample project with jest we cannot change the testing framework to jest again. which is big decision. please lets me how to bypass these errors in vitest.

[Bronya HSR]

I have tested syncfusion components with vitest with angular modules. they are working fine. only issue is they are not working with standalone components. 

[Bronya HSR]

I was able to solve this issue by adding alias in vitest config

alias: [

                {

                    find: /^@syncfusion\/ej2-angular-base$/,

                    replacement: '@syncfusion/ej2-angular-base/dist/es6/ej2-angular-base.es2015.js'

                }],

[Swetha Babu]

Bronya,

We are happy to hear that the reported scenario has been resolved. Please let us know if you need any other assistance.

[Michael Mairegger]

@Bronya HSR, can you provide a sample for this? I have the same error and cannot solve it using your way?

[Durga Gopalakrishnan]

Michael,

We have resolved the reported problem using the suggested approach, and we are now able to run Vitest successfully with all test cases passing. For your reference, we have attached the updated sample.

After downloading the project, please run npm install to install the dependencies, then use ng serve to start the sample. To execute the Vitest test cases, run npx vitest. Please let us know if you have any concerns or need further assistance.

Attachment: chartangularvitest_b8c1e0c0.zip

[Amalia Chrysanthakopoulou]

Hello,

After upgrading to Angular 21 ang trying to migrate to vitest, using this guide I am facing the same problem:

SyntaxError: Named export 'ArrayBase' not found. The requested module '@syncfusion/ej2-angular-base' is a CommonJS module, which may not support all module.exports as named exports.

CommonJS modules can always be imported via the default export, for example using:

import pkg from '@syncfusion/ej2-angular-base';

const { setValue, ComponentBase, ComponentMixins, FormBase, ComplexBase, Template, ArrayBase } = pkg;

Thank you.

[Durga Gopalakrishnan]

Amalia,

We have branched separate forum for Angular base. We kindly request you to follow the forum 198178 for further updates related to ej2-angular-base and follow the current forum for chart related queries.

[Jeeva Selvarasu]

Hi Amalia Chrysanthakopoulou ,

Thank you for contacting Syncfusion Support regarding the issue with running unit tests for the Syncfusion module. The error you encountered indicates that the requested module '@syncfusion/ej2-angular-base' is a CommonJS module, which may not fully support named exports. 

This behavior occurs because Syncfusion packages are distributed as CommonJS (CJS) modules, and Vitest (in ESM mode) cannot resolve them as named exports by default. To address this, please update your vitest.config.ts with the following configuration:

server: {

      deps: {

        inline: [/@syncfusion\/.*/],

      },

    },

We trust this will resolve the issue. Should you have any further questions or require additional assistance, please do not hesitate to reach out.

Regards,

Jeeva S

[Deepak Bisht]

Hi,

We are upgrade our project from version angular 20 to 21 and also replace the Jest framework setup with Vitest.

After completing the updates, when I run the test cases command, it returns some issues related to Syncfusion.

error like -

1-

SyntaxError: Named export 'ArrayBase' not found. The requested module '@syncfusion/ej2-angular-base' is a CommonJS module, which may not support all module.exports as named exports.

CommonJS modules can always be imported via the default export, for example using:

import pkg from '@syncfusion/ej2-angular-base';

const { ComplexBase, setValue, ArrayBase, ComponentBase, Template, ComponentMixins } = pkg;

2-

SyntaxError: Named export 'Aggregate' not found. The requested module '@syncfusion/ej2-grids' is a CommonJS module, which may not support all module.exports as named exports.

CommonJS modules can always be imported via the default export, for example using:

import pkg from '@syncfusion/ej2-grids';

const { Grid, Filter, Page, Selection, Sort, Group, Reorder, RowDD, DetailRow, Toolbar, Aggregate, Search, VirtualScroll, Edit, Resize, ExcelExport, PdfExport, CommandColumn, ContextMenu, Freeze, ColumnMenu, ColumnChooser, ForeignKey, InfiniteScroll, LazyLoadGroup, Pager } = pkg;

3-

src/app/pages/play-book/template/view-all-template-list/view-all-template-list.component.spec.ts ]

 FAIL sourcing-partners src/app/pages/supplier-dashboard/pages/supplier-dashboard/supplier-dashboard.component.spec.ts [ src/app/pages/supplier-dashboard/pages/supplier-dashboard/supplier-dashboard.component.spec.ts ]

SyntaxError: Named export 'AccumulationAnnotation' not found. The requested module '@syncfusion/ej2-charts' is a CommonJS module, which may not support all module.exports as named exports.

CommonJS modules can always be imported via the default export, for example using:

import pkg from '@syncfusion/ej2-charts';

const { Chart, LineSeries, ScatterSeries, ColumnSeries, SplineSeries, SplineAreaSeries, StripLine, AreaSeries, ScrollBar, StepLineSeries, StepAreaSeries, StackingColumnSeries, StackingLineSeries, StackingAreaSeries, StackingStepAreaSeries, BarSeries, StackingBarSeries, RangeColumnSeries, BubbleSeries, Tooltip, Crosshair, Category, DateTime, Logarithmic, Legend, Zoom, DataLabel, Selection, ChartAnnotation, HiloSeries, HiloOpenCloseSeries, WaterfallSeries, RangeAreaSeries, SplineRangeAreaSeries, CandleSeries, PolarSeries, RadarSeries, SmaIndicator, TmaIndicator, EmaIndicator, AccumulationDistributionIndicator, MacdIndicator, AtrIndicator, RsiIndicator, MomentumIndicator, StochasticIndicator, BollingerBands, BoxAndWhiskerSeries, HistogramSeries, ErrorBar, Trendlines, DateTimeCategory, MultiColoredLineSeries, MultiColoredAreaSeries, MultiLevelLabel, ParetoSeries, Export, DataEditing, Highlight, AccumulationChart, PieSeries, FunnelSeries, PyramidSeries, AccumulationTooltip, AccumulationLegend, AccumulationSelection, AccumulationDataLabel, AccumulationAnnotation, RangeNavigator, RangeTooltip, PeriodSelector, Sparkline, SparklineTooltip, Smithchart, SmithchartLegend, TooltipRender, StockChart, StockLegend, BulletChart, BulletTooltip, BulletChartLegend } = pkg;

[Deepak Bisht]

i just wanted to know is the syncfusion totally compatible with Vitest.

[Jeeva Selvarasu]

Hi Deepak Bisht,

Greetings from Syncfusion.

The error you encountered indicates that the requested module '@syncfusion/ej2-angular-base' is a CommonJS module, which may not fully support named exports. 

This behavior occurs because Syncfusion packages are distributed as CommonJS (CJS) modules, and Vitest (in ESM mode) cannot resolve them as named exports by default. To address this, please update your vitest.config.ts with the following configuration:

import { defineConfig } from 'vitest/config';

 

export default defineConfig({

test: {

  globals: true,

  environment: 'jsdom',

  setupFiles: ['./vitest-setup.ts'],

  exclude: ['**/node_modules/**', '**/dist/**'],

  server: {

    deps: {

      inline: [/@syncfusion\/.*/],

    },

  },

},

});

 

When creating Vitest, you need to add the following configuration under "test" in the angular.json:

"test": {

        "builder": "@angular/build:unit-test",

        "options": {

          "tsConfig": "tsconfig.spec.json",

          "buildTarget": "vitest-demo:build:development",

          "runner": "vitest",

          "runnerConfig": "vitest.config.ts"

        }

      }

The purpose of this configuration is to ensure that the necessary settings are defined in vitest.config.ts and properly addressed by Angular. By referencing this file in angular.json, Angular can correctly apply the related configurations during test execution.

 

In the test environment (Vitest + JSDOM), certain limitations exist. JSDOM is primarily designed for DOM testing and does not fully support graphics or SVG animations. For example, Syncfusion’s LineSeries animation calls series.pathElement.getTotalLength() on an SVG.

 

Without Zone.js, Angular does not wrap or patch these asynchronous calls, which can lead to missing API errors. To resolve this, we recommend adding "zone.js": "^0.16.2" in your package.json. Additionally, update your angular.json file to include Zone.js in the build configuration:

"build": {

        "builder": "@angular/build:application",

        "options": {

          "browser": "src/main.ts",

           "polyfills": [

            "zone.js"

          ],

          "tsConfig": "tsconfig.app.json",

          "inlineStyleLanguage": "scss",

          "assets": [

            {

              "glob": "**/*",

              "input": "public"

            }

          ],

          "styles": [

            "src/styles.scss"

          ]

        },

        "configurations": {

          "production": {

            "budgets": [

              {

                "type": "initial",

                "maximumWarning": "500kB",

                "maximumError": "1MB"

              },

              {

                "type": "anyComponentStyle",

                "maximumWarning": "4kB",

                "maximumError": "8kB"

              }

            ],

            "outputHashing": "all"

          },

          "development": {

            "optimization": false,

            "extractLicenses": false,

            "sourceMap": true

          }

        },

        "defaultConfiguration": "production"

      },

 

For your query on whether Syncfusion is compatible with Vitest, by following the above recommended steps we have verified that Syncfusion components are compatible with Vitest.

 

For your reference, we have attached a sample project. We hope this resolves the issue. If you continue to face any difficulties, please feel free to reach out to us.

Regards,

Jeeva S

Attachment: vitestdemoapp_c047439c.zip