Józef Podlecki
Józef Podlecki

Reputation: 11305

$state is not defined when testing Svelte component

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

Answers (0)

Related Questions