SolidJS搭配Vitest测试报错：solid-js/web无hydrate命名导出

报错根因 #

该报错属于模块解析错误：SolidJS通过package.json的exports字段为不同运行环境提供差异化入口，Node端SSR构建版本不包含客户端侧的hydrate导出，只有浏览器/客户端测试环境对应的入口才提供该方法。报错指向App组件导入语句，是因为组件依赖链里引入了solid-js/web的客户端方法，解析到错误入口后就会触发导出不存在的异常。

排查修复步骤 #

• 修正Vitest核心配置
  打开vitest.config.ts（或vite.config.ts内的test配置段），确保配置符合以下要求：

  import { defineConfig } from 'vitest/config';
  import solidPlugin from 'vite-plugin-solid';
  
  export default defineConfig({
    plugins: [solidPlugin()],
    test: {
      // 不能用默认的node环境，必须指定DOM环境
      environment: 'jsdom', // 也可替换为happy-dom，二者选其一即可
      // 补全模块解析条件，命中SolidJS客户端测试入口
      resolve: {
        conditions: ['solid', 'browser', 'development']
      },
      // 确保ssr开关为false，客户端组件测试不能开启SSR模式
      ssr: false
    }
  });
  

  绝大多数该报错都是漏了resolve.conditions配置导致的：Vite运行开发/构建服务时会自动注入这些解析条件，但Vitest默认不会注入，会直接拉取Node端的SSR模块入口触发报错。
• 排查依赖版本冲突
  执行命令检查相关依赖的安装情况：

  npm ls solid-js solid-testing-library vite-plugin-solid
  

  需满足版本要求：
  • solid-js版本≥1.6.0，过低版本的导出规则与新版测试工具链不兼容
  • vite-plugin-solid大版本需与本地solid-js版本对齐，禁止跨大版本混用
  • 如果输出结果显示存在多版本solid-js嵌套安装，直接删除node_modules目录和对应lock文件，重新执行npm install安装依赖即可
• 校准测试文件写法
  组件渲染逻辑直接使用solid-testing-library提供的render方法即可，不要手动从solid-js/web导入hydrate/render自行调用：

  // 正确写法示例
  import { render } from 'solid-testing-library';
  import { App } from './components/App';
  
  test('app renders correctly', () => {
    const { getByText } = render(() => <App />);
    // 后续断言逻辑
  });
  

  solid-testing-library会自动根据运行环境选择合适的渲染方法，手动导入反而容易触发模块解析异常。
• 清理缓存重试
  Vitest默认会缓存模块解析结果，配置修改完成后执行带强制清缓存参数的命令运行测试：

  npx vitest run --force
  

  避免旧缓存导致配置不生效。

内容的提问来源于stack exchange，提问作者craigmiller160