svelte-testing-library搭配Jest非Vitest环境完整配置教程【免费下载链接】svelte-testing-library:chipmunk: Simple and complete Svelte DOM testing utilities that encourage good testing practices项目地址: https://gitcode.com/gh_mirrors/sv/svelte-testing-library你是否在用svelte-testing-library写 Svelte 组件测试却因为项目历史包袱、团队规范或 CI 环境限制不得不在 Jest 而非 Vitest 下运行别担心官方虽推荐 Vitest但svelte-testing-library 对 Jest 的支持非常完善本教程将带你从零开始完成一整套可运行的 Jest 环境配置让你的 Svelte 组件测试顺利跑起来。为什么需要单独的 Jest 配置svelte-testing-library 本质上是把svelte组件挂载到真实 DOMjsdom中再借助testing-library/dom提供查询与交互 API。Vitest 之所以开箱即用是因为它内部有 Vite 做.svelte文件编译而 Jest 没有这个能力必须借助svelte-jester这样的转换器把.svelte编译成 Jest 可识别的 JavaScript这就是非 Vitest 环境需要额外配置的核心原因。第一步一键安装全部依赖在项目根目录执行以下命令一次性装齐测试所需的所有包npm install --save-dev testing-library/svelte testing-library/jest-dom svelte-jester jest jest-environment-jsdom jsdom testing-library/user-eventtesting-library/svelte核心测试库支持 Svelte 3 / 4 / 5svelte-jester负责把.svelte组件编译给 Jest 使用jest-environment-jsdomjsdom提供浏览器环境模拟testing-library/jest-dom提供toBeInTheDocument()等便捷断言testing-library/user-event模拟用户点击、输入等真实交互。 由于testing-library/svelte采用 ESM 模块规范运行 Jest 时需要带上 Node 的实验性 ESM 支持官方仓库的测试命令是NODE_OPTIONS--experimental-vm-modules --no-warnings jest。第二步编写 svelte-jester 转换器svelte-jester 需要配合预处理器配置使用。如果项目没有特殊 Svelte 预处理需求如 TypeScript、scss可以直接这样接入以 v5 为例// svelte-jester.config.mjs export default { preprocess: true, // 按需开启配合 sveltejs/vite-plugin-svelte 的 preprocess }如果用到 TypeScript 语法还需安装svelte-preprocess并配置preprocess: [preprocess({ typescript: true })]这里不展开。第三步核心的 jest.config.js 完整配置这是整个教程最关键的一步。参考项目自身的官方配置见仓库根目录jest.config.js一份可用的 Jest 配置如下// jest.config.js export default { testMatch: [**/__tests__/**/*.test.{js,svelte.js}], transform: { ^.\\.svelte$: svelte-jester, // 编译 Svelte 组件 }, moduleFileExtensions: [js, svelte], extensionsToTreatAsEsm: [.svelte], testEnvironment: jsdom, setupFilesAfterEnv: [rootDir/jest-setup.js], injectGlobals: true, }几个容易踩坑的要点transform必须把.svelte交给 svelte-jester否则 Jest 会报Unexpected token语法错误moduleFileExtensions要包含svelte否则测试文件里import Subject from ./basic.svelte无法解析testEnvironment必须是jsdomsvelte-testing-library 的render依赖 DOM 环境Svelte 5 下转换模式稍有不同组件文件可能带.js后缀官方通过判断 Svelte 版本来动态生成匹配模式参考仓库jest.config.js第 3-6 行的写法即可。第四步配置 jest-dom 与自动清理创建jest-setup.js文件引入 jest-dom 的自定义断言// jest-setup.js import testing-library/jest-dom/jest-globals接下来是 svelte-testing-library 的贴心之处自动清理auto-cleanup。只要测试环境中存在全局的beforeEach/afterEach库就会在每条测试前后自动执行环境初始化与组件卸载保证测试相互隔离你无需手动调用cleanup()。这一逻辑写在packages/svelte/src/index.js中if (typeof beforeEach function) { beforeEach(async () { await setup() }) } if (typeof afterEach function) { afterEach(async () { await act(); cleanup() }) }如果项目中有自己的全局钩子、想手动控制清理时机可以设置环境变量STL_SKIP_AUTO_CLEANUP1 jest来关闭自动清理。第五步编写并运行第一个测试参考仓库examples/basic/basic.test.js的写法写一个最简单的组件测试import { render, screen } from testing-library/svelte import userEvent from testing-library/user-event import Subject from ./Basic.svelte test(点击按钮后显示问候语, async () { const user userEvent.setup() render(Subject, { name: World }) const button screen.getByRole(button, { name: Greet }) expect(button).toBeInTheDocument() await user.click(button) expect(screen.getByText(/hello world/iu)).toBeInTheDocument() })运行测试NODE_OPTIONS--experimental-vm-modules --no-warnings jest一切顺利的话你会看到测试全部通过 ✅。核心流程就是render挂载组件 →screen查询元素 →userEvent模拟交互 → jest-dom 断言结果全程无需手动操作组件实例完全模拟真实用户视角。常见问题速查表报错现象解决办法Unexpected token解析.svelte失败检查transform是否配置了svelte-jester找不到module无法 import.sveltemoduleFileExtensions加入sveltewindow is not defined确认testEnvironment: jsdomtoBeInTheDocument is not a function在 setup 文件里引入 jest-domSvelte 5 组件转换异常参考官方jest.config.js按版本动态匹配模式如果遇到更复杂的场景可以直接查看这个开源项目的源码作为参考仓库根目录的jest.config.js、tests/_jest-setup.js、tests/_jest-vitest-alias.js以及examples/basic/下的示例测试都是现成的教科书级配置。若需本地调试可执行git clone https://gitcode.com/gh_mirrors/sv/svelte-testing-library至此你的Svelte 组件测试搭配 Jest 的完整配置已经大功告成 无论是新项目还是历史项目迁移这套方案都能让 svelte-testing-library 在非 Vitest 环境下稳定工作帮你写出更贴近用户真实操作的可靠测试。【免费下载链接】svelte-testing-library:chipmunk: Simple and complete Svelte DOM testing utilities that encourage good testing practices项目地址: https://gitcode.com/gh_mirrors/sv/svelte-testing-library创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
svelte-testing-library搭配Jest非Vitest环境完整配置教程【免费下载链接】svelte-testing-library:chipmunk: Simple and complete Svelte DOM testing utilities that encourage good testing practices项目地址: https://gitcode.com/gh_mirrors/sv/svelte-testing-library你是否在用svelte-testing-library写 Svelte 组件测试却因为项目历史包袱、团队规范或 CI 环境限制不得不在 Jest 而非 Vitest 下运行别担心官方虽推荐 Vitest但svelte-testing-library 对 Jest 的支持非常完善本教程将带你从零开始完成一整套可运行的 Jest 环境配置让你的 Svelte 组件测试顺利跑起来。为什么需要单独的 Jest 配置svelte-testing-library 本质上是把svelte组件挂载到真实 DOMjsdom中再借助testing-library/dom提供查询与交互 API。Vitest 之所以开箱即用是因为它内部有 Vite 做.svelte文件编译而 Jest 没有这个能力必须借助svelte-jester这样的转换器把.svelte编译成 Jest 可识别的 JavaScript这就是非 Vitest 环境需要额外配置的核心原因。第一步一键安装全部依赖在项目根目录执行以下命令一次性装齐测试所需的所有包npm install --save-dev testing-library/svelte testing-library/jest-dom svelte-jester jest jest-environment-jsdom jsdom testing-library/user-eventtesting-library/svelte核心测试库支持 Svelte 3 / 4 / 5svelte-jester负责把.svelte组件编译给 Jest 使用jest-environment-jsdomjsdom提供浏览器环境模拟testing-library/jest-dom提供toBeInTheDocument()等便捷断言testing-library/user-event模拟用户点击、输入等真实交互。 由于testing-library/svelte采用 ESM 模块规范运行 Jest 时需要带上 Node 的实验性 ESM 支持官方仓库的测试命令是NODE_OPTIONS--experimental-vm-modules --no-warnings jest。第二步编写 svelte-jester 转换器svelte-jester 需要配合预处理器配置使用。如果项目没有特殊 Svelte 预处理需求如 TypeScript、scss可以直接这样接入以 v5 为例// svelte-jester.config.mjs export default { preprocess: true, // 按需开启配合 sveltejs/vite-plugin-svelte 的 preprocess }如果用到 TypeScript 语法还需安装svelte-preprocess并配置preprocess: [preprocess({ typescript: true })]这里不展开。第三步核心的 jest.config.js 完整配置这是整个教程最关键的一步。参考项目自身的官方配置见仓库根目录jest.config.js一份可用的 Jest 配置如下// jest.config.js export default { testMatch: [**/__tests__/**/*.test.{js,svelte.js}], transform: { ^.\\.svelte$: svelte-jester, // 编译 Svelte 组件 }, moduleFileExtensions: [js, svelte], extensionsToTreatAsEsm: [.svelte], testEnvironment: jsdom, setupFilesAfterEnv: [rootDir/jest-setup.js], injectGlobals: true, }几个容易踩坑的要点transform必须把.svelte交给 svelte-jester否则 Jest 会报Unexpected token语法错误moduleFileExtensions要包含svelte否则测试文件里import Subject from ./basic.svelte无法解析testEnvironment必须是jsdomsvelte-testing-library 的render依赖 DOM 环境Svelte 5 下转换模式稍有不同组件文件可能带.js后缀官方通过判断 Svelte 版本来动态生成匹配模式参考仓库jest.config.js第 3-6 行的写法即可。第四步配置 jest-dom 与自动清理创建jest-setup.js文件引入 jest-dom 的自定义断言// jest-setup.js import testing-library/jest-dom/jest-globals接下来是 svelte-testing-library 的贴心之处自动清理auto-cleanup。只要测试环境中存在全局的beforeEach/afterEach库就会在每条测试前后自动执行环境初始化与组件卸载保证测试相互隔离你无需手动调用cleanup()。这一逻辑写在packages/svelte/src/index.js中if (typeof beforeEach function) { beforeEach(async () { await setup() }) } if (typeof afterEach function) { afterEach(async () { await act(); cleanup() }) }如果项目中有自己的全局钩子、想手动控制清理时机可以设置环境变量STL_SKIP_AUTO_CLEANUP1 jest来关闭自动清理。第五步编写并运行第一个测试参考仓库examples/basic/basic.test.js的写法写一个最简单的组件测试import { render, screen } from testing-library/svelte import userEvent from testing-library/user-event import Subject from ./Basic.svelte test(点击按钮后显示问候语, async () { const user userEvent.setup() render(Subject, { name: World }) const button screen.getByRole(button, { name: Greet }) expect(button).toBeInTheDocument() await user.click(button) expect(screen.getByText(/hello world/iu)).toBeInTheDocument() })运行测试NODE_OPTIONS--experimental-vm-modules --no-warnings jest一切顺利的话你会看到测试全部通过 ✅。核心流程就是render挂载组件 →screen查询元素 →userEvent模拟交互 → jest-dom 断言结果全程无需手动操作组件实例完全模拟真实用户视角。常见问题速查表报错现象解决办法Unexpected token解析.svelte失败检查transform是否配置了svelte-jester找不到module无法 import.sveltemoduleFileExtensions加入sveltewindow is not defined确认testEnvironment: jsdomtoBeInTheDocument is not a function在 setup 文件里引入 jest-domSvelte 5 组件转换异常参考官方jest.config.js按版本动态匹配模式如果遇到更复杂的场景可以直接查看这个开源项目的源码作为参考仓库根目录的jest.config.js、tests/_jest-setup.js、tests/_jest-vitest-alias.js以及examples/basic/下的示例测试都是现成的教科书级配置。若需本地调试可执行git clone https://gitcode.com/gh_mirrors/sv/svelte-testing-library至此你的Svelte 组件测试搭配 Jest 的完整配置已经大功告成 无论是新项目还是历史项目迁移这套方案都能让 svelte-testing-library 在非 Vitest 环境下稳定工作帮你写出更贴近用户真实操作的可靠测试。【免费下载链接】svelte-testing-library:chipmunk: Simple and complete Svelte DOM testing utilities that encourage good testing practices项目地址: https://gitcode.com/gh_mirrors/sv/svelte-testing-library创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
