I am trying to test a simple Svelte component using Jest and @testing-library/svelte, but I am encountering the following error:
Error
ReferenceError: $state is not defined 3 | 4 | it('it works', async () => {> 5 | const { getByText, getByTestId } = render(Sample); | ^ 6 | }) at mount (node_modules/@testing-library/svelte/src/core/modern.svelte.js:26:17) at render (node_modules/@testing-library/svelte/src/pure.js:72:21) at Object.<anonymous> (src/sample.spec.ts:5:40)
The component is very basic and does not use any stores:
I tried fiddling with filename i.e sample.svelte.spec.ts
sample.svelte
<script lang="ts"></script><div> Test</div>
sample.spec.ts
import Sample from './sample.svelte'import { render, fireEvent } from '@testing-library/svelte'it('it renders', async () => { const { getByText, getByTestId } = render(Sample); })
package.json
"scripts": {"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js" },"license": "MIT","dependencies": {"flowbite": "^1.6.4","flowbite-svelte": "^0.47.3", },"devDependencies": {"@sveltejs/adapter-static": "^3.0.5","@sveltejs/kit": "^2.7.0","@sveltejs/vite-plugin-svelte": "^4.0.0","@testing-library/jest-dom": "^6.6.3","@testing-library/svelte": "^5.2.4","@types/jest": "^29.5.14","@types/node": "^22.9.0","@typescript-eslint/eslint-plugin": "^6.7.3","@typescript-eslint/parser": "^6.7.3","autoprefixer": "^10.4.14","eslint": "^8.28.0","eslint-config-prettier": "^9.0.0","eslint-plugin-svelte": "^2.33.2","jest": "^29.7.0","jest-environment-jsdom": "^29.7.0","jsdom": "^25.0.1","postcss": "^8.4.21","prettier": "^3.0.3","prettier-plugin-svelte": "^3.0.3","prettier-plugin-tailwindcss": "^0.5.4","svelte": "^5.0.0","svelte-check": "^4.0.0","svelte-jester": "^5.0.0","svelte-preprocess": "^6.0.3","ts-jest": "^29.2.5","ts-node": "^10.9.2","tslib": "^2.8.0","typescript": "^5.6.3","vite": "^5.4.10","vitest": "^2.1.5" }
jest.config.ts
import type {Config} from 'jest';const config: Config = { preset: 'ts-jest', testEnvironment: 'jsdom', verbose: true, transform: {'^.+\\.svelte$': ['svelte-jester', { preprocess: true }],'^.+\\.ts$': ['ts-jest', { useESM: true }], }, moduleFileExtensions: ["js","ts","svelte" ], extensionsToTreatAsEsm: ['.ts','.svelte' ], setupFilesAfterEnv: ["@testing-library/jest-dom"]};export default config;
Any thoughts?
Thanks