Reputation: 11305
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
Upvotes: 1
Views: 219