Vitest Not working

Question

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 · Answer

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 · Answer

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 · Answer

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

Swetha Babu · Answer

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 · Answer

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 · Answer

please find the updated sampleAttachment: AngularSample_82d0b898.zip

Bronya HSR · Answer

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 · Answer

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 · Answer

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,NishanthiAttachment: Demo_1_b5607354.zip

Bronya HSR · Answer

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 · Answer

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 · Answer

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 · Answer

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 · Answer

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

Durga Gopalakrishnan · Answer

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