测试Svelte组件时出现$state is not defined错误求助

问题重现 #

使用Jest和@testing-library/svelte测试基础Svelte 5组件时，抛出ReferenceError: $state is not defined错误，错误指向render方法调用，组件本身未使用任何状态或store。

解决思路 #

1. 配置svelte-jester支持Svelte 5编译器 #

Svelte 5使用了全新的编译API，需要明确告知svelte-jester使用Svelte 5版本编译组件。修改jest.config.ts中的transform配置：

transform: {
  '^.+\\.svelte$': ['svelte-jester', { preprocess: true, compilerVersion: 5 }],
  '^.+\\.ts$': ['ts-jest', { useESM: true }],
},

2. 确保Svelte预处理器正确配置 #

如果项目使用svelte-preprocess，需在项目根目录创建svelte.config.js并配置预处理器（确保版本支持Svelte 5）：

import preprocess from 'svelte-preprocess';

export default {
  preprocess: preprocess()
};

3. 完善ESM环境配置 #

在package.json中添加"type": "module"，确保Node.js默认以ESM模式处理文件，替代--experimental-vm-modules参数：

{
  "type": "module",
  "scripts": {
    "test": "jest"
  }
}

同时确保jest.config.ts的导出格式与ESM兼容（保持export default即可）。

4. 切换到Vitest（推荐方案） #

Svelte 5官方更推荐使用Vitest进行测试，其对ESM和Svelte新特性的支持更完善：

1. 修改package.json的测试脚本：

   "scripts": {
     "test": "vitest"
   }
   

2. 创建vitest.config.ts：

   import { defineConfig } from 'vitest/config';
   import { svelte } from '@sveltejs/vite-plugin-svelte';
   
   export default defineConfig({
     plugins: [svelte()],
     test: {
       environment: 'jsdom',
       setupFiles: ['./src/setupTests.ts'] // 若需@testing-library/jest-dom，在此导入
     }
   });
   

3. 测试文件无需大幅修改，@testing-library/svelte的API在Vitest环境下完全兼容。

5. 验证依赖版本一致性 #

确保核心依赖版本匹配：

• svelte: ^5.0.0（已满足）
• @testing-library/svelte: ^5.2.4（已满足）
• svelte-jester: ^5.0.0（已满足）
• svelte-preprocess: ^6.0.3（已满足，需支持Svelte 5）

内容的提问来源于stack exchange，提问作者Józef Podlecki