I can't manage to make Vitest work with a new standalone ionic-angular project

Ionic Framework
1

Hi everyone!
I’m trying to install Vitest on a newly created Ionic-angular project and I’m getting into troubles. I followed this article to install Vitest :

But ng test ends with this error:

Cannot use import statement outside a module
Module /node_modules/.pnpm/@ionic+core@7.8.4/node_modules/@ionic/core/components/ion-back-button.js:4
 seems to be an ES Module but shipped in a CommonJS package.
You might want to create an issue to the package "@ionic/core" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As it is suggested, I have updated the vite.config.mts file :

export default defineConfig(({ mode }) => {
  return {
    plugins: [angular()],
    test: {
      globals: true,
      environment: 'jsdom',
      setupFiles: ['src/test-setup.ts'],
      include: ['**/*.spec.ts'],
      reporters: ['default'],
      server: {
        deps: {
          inline: ["@ionic/core"]
        }
      }
    },
    define: {
      'import.meta.vitest': mode !== 'production',
    },
  };
});

but ng test ends with the same error.
Has anyone managed to make it work ?

2

:wave: I authored that blog post. TL;DR is some packages need to be transformed to work correctly with ESM. Angular packages and CommonJS packages are common examples of this.

The @ionic/core package is a transitive dependency of the @ionic/angular package, so adding @ionic/angular to the test.server.deps.inline array allows it to get optimized correctly and transformed from CommonJS into compatible ESM to use with Vite/Vitest

Example config

export default defineConfig(({ mode }) => {
  return {
    plugins: [angular()],
    test: {
      globals: true,
      environment: 'jsdom',
      setupFiles: ['src/test-setup.ts'],
      include: ['**/*.spec.ts'],
      reporters: ['default'],
      server: {
        deps: {
          inline: ["@ionic/angular"]
        }
      }
    },
    define: {
      'import.meta.vitest': mode !== 'production',
    },
  };
});
1 Like
3

Hi ! Thank you for your help ! It works now.
One more question… How do I pass the --ui or --coverage option to the “ng test” command ?
I tried “ng test --coverage” but I got an error “Unknown argument”