Add Vitest to create-svelte

[jtlapp]

Describe the problem

I have spent many hours trying to figure out the best way to do unit testing with playwright. Sometimes I make progress, sometimes I get stuck. Right now I've got basic tests working but I'm stuck on mocking dependent modules.

At one point I tried to install jest but could not get it working with SvelteKit's configuration files. I'm thinking that the problem was supporting TypeScript. (That was two weeks ago, so I don't remember the details.)

Apparently, playwright is not really designed for unit testing, which probably explains Google's inability to pull up anything helpful.

So I'm here feeling displeased with SvelteKit. Something about the default installation is incompatible with jest or with jest + TypeScript. If some solutions are incompatible, what does SvelteKit recommend?

Describe the proposed solution

I'd like to see something in the docs on doing unit testing -- running purely in node.js -- and maybe even an example unit test. I need a solution that supports mocking dependencies.

I'm not sure whether it's SvelteKit's support for unit testing that's incomplete or SvelteKit's support for TypeScript, but it looks like one of these to me.

Alternatives considered

No response

Importance

i cannot use SvelteKit without it

Additional Information

No response

[dummdidumm]

This may help: https://github.com/rossyman/svelte-add-jest

[jtlapp]

Wow! That did it! I'm surprised I hadn't come across this before. Thank you so much!

There is one oddity: it completely bumped the playwright test script:

But I am still able to run playwright tests from the command line, so I'll be able to add playwright back in.

[jtlapp]

Except now I'm off trying to figure out why vite is pulling in .spec.ts files, despite tsconfig.json containing "exclude": ["src/**/*.spec.ts"]:

1:59:06 PM [vite] Error when evaluating SSR module /Users/joe/repos/cavesite/src/routes/index.spec.ts:
ReferenceError: describe is not defined

UPDATE: I solved the problem by modifying svelte.config.js per this SO answer.

[jtlapp]

But I'm having import problems. It's not pulling in postgres. These are unit tests I had working under playwright, converted to jest.

At this point, I've probably spent a cumulative total of 8 hours trying to get unit tests working under SvelteKit. I can't keep wasting so much time. I have two things left to try:

• Try to get unit testing working under Mocha or Jasmine.
• Put all modules requiring unit tests in a separate package, and pull that package into my SvelteKit repo.

[jtlapp]

I've thought of a way to make my dependent module test-configurable so I don't have to stub it and can stick with playwright. Figuring out unit testing under SvelteKit has been such a bear.

[jtlapp]

I've finally got functioning unit test support with vitest-svelte-kit. It was as simple as installing the package and adding vitest.config.js. Nothing more to configure. Everything works, including playwright tests.

[jtlapp]

Maybe the thing to do in the docs is to list the known efforts to provide svelte-kit with unit testing? Here are two:

• svelte-add-jest (though it installed a demo test in routes/ and wouldn't let my tests import some packages)
• vitest-svelte-kit (worked seamlessly with my test suite, but VSCode extensions are not reliable)

UPDATE: comment about reliability of VSCode extensions for vitest

[jtlapp]

Another approach would be to use a monorepo and put the backend code into its own repo with its own unit testing. Unfortunately, I spent a day trying to do this, trying to resolve all the problems that arose, and ultimately decided that maybe I should ditch SvelteKit and do an SPA. I'll start a discussion about this.

[jtlapp]

I've broached a more general docs issue in discussion #4586.

[jtlapp]

The playwright unit test runner could potentially resolve one of my problems with using svelte-kit. I would like to be able to choose my runner for unit tests, but I could live with being forced to use this one.

[benmccann]

I think we will be recommending Vitest as the preferred unit testing solution using @sveltejs/kit/experimental/vite (#5184)