svelte-jester 2.x does not work

[mszkb]

svelte-jester 2.x does not work with jest 27, see svelteness/svelte-jester#65

Solution: Downgrade to

"ts-jest": "26.5.6",
"jest": "26.6.3",
"svelte-jester": "1.8.2",

[opensas]

I can confirm the issue:

steps to reproduce

npm init svelte@next svelte-jest-add-js

cd svelte-jest-add-js/

npx apply rossyman/svelte-add-jest

pnpm install 

pnpm test

> ~[email protected] test /home/sas/devel/apps/glas-it/apps/wingback/learn/svelte-jest-add-js
> jest src --config jest.config.json

 FAIL  src/routes/index.spec.js
  ● Test suite failed to run

    Jest: synchronous transformer /home/sas/devel/apps/glas-it/apps/wingback/learn/svelte-jest-add-js/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/svelte-jester/dist/transformer.cjs must export a "process" function.

      at invariant (node_modules/.pnpm/@[email protected]/node_modules/@jest/transform/build/ScriptTransformer.js:1092:11)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.67 s, estimated 1 s
Ran all test suites matching /src/i.
 ERROR  Test failed. See above for more details.

Workaround:

pnpm install -D [email protected] [email protected]

Using typescript just have to also add ts-jest

pnpm install -D [email protected] [email protected] [email protected]

[benmccann]

I got it to work in ESM mode with the following changes per the docs:

• Add NODE_OPTIONS=--experimental-vm-modules
• Set "extensionsToTreatAsEsm": [".svelte"],

The test was then failing unrelated to the svelte-jester changes, so I had to update it to use the jsdom test environment and look for text that was in the page instead of "Hello World", which isn't present in the demo app

[mostlymetalman]

Forgive if I'm missing the obvious, I'm fairly new to most of this.

@benmccann's suggestion does get past some issues, but it doesn't get me all the way there. I don't think this issue is the same as the one addressed by using jsdom

Starting with a clean project like @opensas above, with the following choices for the init:

✔ Which Svelte app template? › SvelteKit demo app
✔ Use TypeScript? … No / Yes
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

And this for the svelte-add-jest:

[ question ] Enable Jest DOM support? (Y/n) · true
[ question ] Enable TypeScript support? (y/N) · true
[ question ] Generate example test file? (Y/n) · true

And supplying NODE_OPTIONS and extensionsToTreatAsEsm get's me past the linked Transfromer.js issue but then lands on:

 FAIL  src/routes/index.spec.ts
  ● Test suite failed to run

    Must use import to load ES Module: /⬛/svelte-jest-add-js/src/routes/index.svelte

      1 | import '@testing-library/jest-dom/extend-expect';
      2 | import { render } from '@testing-library/svelte';
    > 3 | import index from './index.svelte';
        | ^
      4 |
      5 | test('shows proper heading when rendered', () => {
      6 |   const { getByText } = render(index);

      at Runtime.requireModule (node_modules/jest-runtime/build/index.js:829:21)
      at Object.<anonymous> (src/routes/index.spec.ts:3:1)

Tried some workarounds for this but no luck.

Of course, version rollback works fine.

[benmccann]

You must have messed something up. I'm not sure what. But I pushed a working example of a project using svelte-jester 2.x here: https://github.com/benmccann/svelte-jest-add-example

[mostlymetalman]

thanks, @benmccann Indeed this works fine!

Yup. very likely I did mess something up. I see, your minimal example was inited differently than what I did. ("skeleton" then all defaults, i'm guessing?)

The minimal change to break things the way I did is to use typescript, and then make your changes. Should I not have expected TS support to work? Maybe some extra steps I should have taken?

[benmccann]

I didn't try with TypeScript. I sent svelteness/svelte-jester#71 to fix the CJS support though

[rossyman]

Investigating now -- v27 did seem to change the way the environment is setup and how imports work -- Going to see how the adder can accommodate these changes.

[rossyman]

thanks, @benmccann Indeed this works fine!

Yup. very likely I did mess something up. I see, your minimal example was inited differently than what I did. ("skeleton" then all defaults, i'm guessing?)

The minimal change to break things the way I did is to use typescript, and then make your changes. Should I not have expected TS support to work? Maybe some extra steps I should have taken?

Looked into the TypeScript issue, and I've managed to fix it with a little extra configuration, after following the steps outlined by @benmccann further up:

/**
 * Modify your jest.config.json to include the following:
 */
"transform": {
    /** Other transformers here ... */
    "^.+\\.svelte$": [
        "./node_modules/svelte-jester/dist/transformer.mjs",
        {
            "preprocess": true
        }
    ],
},
"extensionsToTreatAsEsm": [
    ".ts",
    ".svelte"
],
"globals": {
    "ts-jest": {
      "tsconfig": "tsconfig.spec.json",
      "useESM": true
    }
}

For whatever reason, even when running with the ESM flag enabled via NODE_OPTIONS=--experimental-vm-modules, "type": "module" within the package.json and "useESM": true in ts-jest, Jest still seems to be using dist/transformer.cjs supplied via svelte-jester, which seems to be resulting in the issue Must use import to load ES Module:. By swapping out svelte-jester with ./node_modules/svelte-jester/dist/transformer.mjs, the issue is resolved.