Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

$state is not defined when testing Svelte component

$
0
0

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


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>