vitest

vite.config.ts

import legacy from '@vitejs/plugin-legacy'
import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';
import relay from 'vite-plugin-relay';
// import { esbuildCommonjs, viteCommonjs } from '@originjs/vite-plugin-commonjs'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // commonjs({
    //   filter(id) {
    //     if (id.includes('node_modules/core-js')) {
    //       return true;
    //     }
    //   },
    // }),
    legacy({
      // targets: ['defaults', 'not IE 11'],
    }),
    relay,
    react(),
  ],
  define: {
    'process.env': process.env,
    global: 'window',
  },
  // optimizeDeps: {
  //   esbuildOptions: {
  //     plugins: [
  //       esbuildCommonjs(['core-js'])
  //     ]
  //   }
  // }
  build: {
    commonjsOptions: {
      strictRequires: true,
    },
  },
});

viteRelayPlugin.js

import { transformSync } from '@babel/core';

module.exports = {
  name: 'vite:relay',
  transform(src, id) {
    if (/.(t|j)sx?/.test(id) && src.includes('graphql`')) {
      const out = transformSync(src, {
        presets: [
          [
            '@babel/preset-env',
            {
              // corejs: 3,
              // useBuiltIns: 'usage',
              modules: false,
              loose: false,
            },
          ],
        ],
        plugins: [
          [
            'babel-plugin-relay',
            {
              eagerEsModules: true,
            },
          ],
        ],
        code: true,
        filename: id,
        sourceMaps: true,
      });

      if (!out?.code) {
        throw new Error(`vite-plugin-relay: Failed to transform ${id}`);
      }

      const code = out.code;
      const map = out.map;

      return {
        code,
        map,
      };
    }
  },
};

vitest.config.global.ts

import react from '@vitejs/plugin-react';

import relay from './src/vitest/viteRelayPlugin';

/**
 * @type {import('vite').UserConfig} vitestBaseConfig
 */
export const vitestBaseConfig = {
  plugins: [react(), relay],
  resolve: {
    mainFields: ['module', 'main'],
    // alias: {
    //   clsx: 'clsx/dist/clsx.js',
    // },
    // alias: {
    //   '@woovi/ui': path.resolve(__dirname, '../ui/src/index.tsx'),
    // },
  },
  test: {
    // name: 'charge',
    environment: 'jsdom',
    globals: true,
    // globalSetup: [
    //   '../testutils/src/vitest/globalSetup.ts',
    // ],
    // setupFiles: [
    //   '../testutils/src/vitest/setupFiles.ts'
    // ],
    include: ['./src/**/*.spec.tsx'],
    server: {
      deps: {
        inline: ['clsx'],
      },
    },
  },
  // Fallback to ensure that won't fail down on CJS of graphql
  // See more: https://github.com/graphql/graphql-js/issues/2801
  // resolve: {
  //   alias: {
  //     graphql: 'graphql/index.js',
  //   },
  // },
};

vitest.config.ts

import { defineConfig } from 'vitest/config';

import pkg from './package.json'
import { vitestBaseConfig } from '../testutils/vitest.config.base';


export default defineConfig({
  ...vitestBaseConfig,
  test: {
    ...vitestBaseConfig.test,
    name: pkg.name,
  },
});