ReferenceError: document is not defined when doing svelte tests

Question

i get this error

FAIL  src/components/Buttons/Create.test.js
  ✕ shows proper heading when rendered (1 ms)

  ● shows proper heading when rendered

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.
    
    ReferenceError: document is not defined

       7 |
       8 | test('shows proper heading when rendered', () => {
    >  9 |      const { getByText } = render(Comp, { create: '/test' });
         |                            ^
      10 |
      11 |      expect(getByText('/test')).toBeInTheDocument();
      12 | });

      at render (node_modules/@testing-library/svelte/dist/pure.js:55:28)
      at Object.<anonymous> (src/components/Buttons/Create.test.js:9:24)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.567 s, estimated 1 s
Ran all test suites matching /src/i.

here's my test:

// NOTE: jest-dom adds handy assertions to Jest and it is recommended, but not required.
import '@testing-library/jest-dom';

import { render } from '@testing-library/svelte';

import Comp from './Create';

test('shows proper heading when rendered', () => {
    const { getByText } = render(Comp, { create: '/test' });

    expect(getByText('/test')).toBeInTheDocument();
});

here's my component:

<script>
    export let create = '';
</script>

<a href={create}><img src="/icons/plus.svg" alt="" /></a>

<style>
    img {
        width: 3rem;
        margin-left: 1rem;
    }

    a {
        font-weight: 400;
        font-size: 1.6rem;
        text-decoration: none;
        color: #fff;
    }
</style>

Here is package.json:

    "jest": {
        "verbose": true,
        "transform": {
            "^.+\\.svelte$": [
                "svelte-jester",
                {
                    "preprocess": true
                }
            ],
            "^.+\\.js$": "babel-jest",
            "^.+\\.ts$": "ts-jest"
        },
        "moduleFileExtensions": [
            "js",
            "ts",
            "svelte"
        ],
        "setupFilesAfterEnv": [
            "@testing-library/jest-dom/extend-expect"
        ]
    }

I have no idea how to fix this. I'm using testing-library.com and sveltekit.

Answer 1

adding "testEnvironment": "jsdom", to package.json fixes it:

package.json:

"jest": {
        "verbose": true,
        "testEnvironment": "jsdom",
        "transform": {
            "^.+\\.svelte$": [
                "svelte-jester",
                {
                    "preprocess": true
                }
            ],
            "^.+\\.js$": "babel-jest",
            "^.+\\.ts$": "ts-jest"
        },
        "moduleFileExtensions": [
            "js",
            "ts",
            "svelte"
        ],
        "setupFilesAfterEnv": [
            "@testing-library/jest-dom/extend-expect"
        ]
    }