Vitest Unexpected token 'export'

Question

I'm trying to migrate to vitest for my ionic project

But I got this error :

src/view/pages/paymentList/__tests__/PaymentListPage.test.tsx [ src/view/pages/paymentList/__tests__/PaymentListPage.test.tsx ]
SyntaxError: Unexpected token 'export'
 ❯ Object.compileFunction node:vm:352:18
 ❯ Object.<anonymous> node_modules/@ionic/react/dist/index.js:6:20

Module /Users/foo/workspaces/bar/ceres-app/node_modules/@ionic/core/components/index.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 a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    deps: {
      inline: [
        "@ionic/core"
      ]
    }
  }
}

My vite.config.ts :

import { defineConfig } from "vite";

export default defineConfig({
  test: {
    globals: true,
    setupFiles: "src/setupTests.ts"
  },
});

Answer 1

I found a workaround, it's related to ionic

https://github.com/ionic-team/ionic-framework/issues/25104

/// <reference types="vitest" />
/// <reference types="vite/client" />
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()],
  resolve: {
    // Workaround to fix inline dependency of a dependency, which is the case in @ionic/react
    mainFields: ['module'],
  },
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.ts',
  },
});