T
TanStack•5mo ago
like-gold

How do I make vitest globals work with my Tanstack Start config?

I have an app.config.ts like this: 
import { defineConfig } from '@tanstack/react-start/config';
import { PluginOption } from 'vite';
import tsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  tsr: {
    appDirectory: 'src',
  },
  vite: {
    ssr: {
      noExternal: ['@mui/*'],
    },
    test: {
      environment: 'jsdom',
      globals: true,
      setupFiles: './vitest.setup.ts',
    },
    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }) as unknown as PluginOption,
    ],
  },
});
import { defineConfig } from '@tanstack/react-start/config';
import { PluginOption } from 'vite';
import tsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  tsr: {
    appDirectory: 'src',
  },
  vite: {
    ssr: {
      noExternal: ['@mui/*'],
    },
    test: {
      environment: 'jsdom',
      globals: true,
      setupFiles: './vitest.setup.ts',
    },
    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }) as unknown as PluginOption,
    ],
  },
});
and my tsconfig.ts looks like this: 
{
  "include": ["**/*.ts", "**/*.tsx", "public/script*.js"],
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "target": "ES2022",
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    },
    "noEmit": true,
    "allowImportingTsExtensions": true,
    "types": ["vitest/globals"]
  }
}
{
  "include": ["**/*.ts", "**/*.tsx", "public/script*.js"],
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "target": "ES2022",
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    },
    "noEmit": true,
    "allowImportingTsExtensions": true,
    "types": ["vitest/globals"]
  }
}
when I run tests using vitest command I get: ReferenceError: describe is not defined I'm migrating the app from React Router Framework to Tanstack Start and previously everthing's been working as expected, did I miss some specific option for Tanstack Start?
1 Reply
like-gold
like-goldOP•5mo ago
Nvm, managed to resolve it by creating vitest.config.ts with the next content: 
import { PluginOption } from 'vite';
import tsConfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './vitest.setup.ts',
  },
  plugins: [
    tsConfigPaths({
      projects: ['./tsconfig.json'],
    }) as unknown as PluginOption,
  ],
});
import { PluginOption } from 'vite';
import tsConfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './vitest.setup.ts',
  },
  plugins: [
    tsConfigPaths({
      projects: ['./tsconfig.json'],
    }) as unknown as PluginOption,
  ],
});

Did you find this page helpful?