ts-vitest and js-vitest templates are not working for me

[faassen]

When I do:

$ npx degit solidjs/templates/ts-vitest my-vitest-app
$ cd my-vitest-app
$ npm install
$ npm test

I get the following error:

SyntaxError: The requested module 'solid-js/web' does not provide an export named 'hydrate'
 ❯ async src/todo-list.test.tsx:5:31
      3| import { render, fireEvent } from 'solid-testing-library';
      4|
      5| import { TodoList } from './todo-list';
       |                               ^
      6|
      7| describe('<TodoList />', () => {

Weirdly enough I can import hydrate just fine.

I wanted TypeScript, but I also tested js-vitest, which leads to the same problem.

Thinking it might be a problem with versions, I changed package.json to use exact versions, but to no avail. I even looked at this commit: https://github.com/solidjs/templates/commit/332b634e7698dc2165f6481ca296e92e3f066892 and when to those versions, but still no luck.

This is rather baffling! It must be something is different for me locally that triggers this problem, though I'm at a loss as to what. I'm using npm with node version v16.13.2 on Fedora linux. I've just tried the latest LTS at the time, node v16.15.0, which makes no difference.

I've also downgraded to node v14.17.6 and I get a slightly different error: SyntaxError: The requested module 'solid-js/web' does not provide an export named 'render'. For good measure I tried node v17.9.0, and node v18.1.0 to no avail: I get the "hydrate" error again.

I also tried pnpm as I saw a pnpm-lock.yaml that comes with the template, but that fails during pnpm install:

> [email protected] postinstall /home/faassen/projects/my-vitest-app
> node ./fix-jest-dom.mjs

file:///home/faassen/projects/my-vitest-app/fix-jest-dom.mjs:8
    if (err) throw err;
             ^

[Error: ENOENT: no such file or directory, open '/home/faassen/projects/my-vitest-app/node_modules/@types/testing-library__jest-dom/index.d.ts'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/home/faassen/projects/my-vitest-app/node_modules/@types/testing-library__jest-dom/index.d.ts'
}

(that whole fix-jest-dom script is a rather ugly hack anyhow...)

P.S. I'm struggling with setting up any kind of working test setup; before coming here I've tried to follow the vitest example in the guide as well (with the same error as a result) as well as the jest example in the guide (where I keep running either into "expect is not defined" or "regeneratorRunTime is not defined" depending on whether I define setupFiles in the jest config or not), but so far I keep getting stymied.

[giftkugel]

I am facing the same issues regarding ts-vitest and js-vitest

SyntaxError: The requested module 'solid-js/web' does not provide an export named 'hydrate'

[faassen]

I forgot to add this, but my PR in solid/templates has a working Jest setup now.

https://github.com/solidjs/templates/pull/48

[atk]

I tried to fix ts-vitest: https://github.com/solidjs/templates/pull/49

[giftkugel]

I tried to fix ts-vitest: #49

Hmm, your changes don't fix the issue on my machine. Strange.

[o-az]

I'm able to run ts-vitest with no issues

Stackblitz ⚡️

[atk]

Did you use pnpm to install the modules?

[o-az]

Did you use pnpm to install the modules?

Yarn. I always avoid pnpm.

[giftkugel]

I'm able to run ts-vitest with no issues

Stackblitz ⚡️

But you not tried to execute npm test in ts-vitest right? Even in your Stackblitz example the tests are failing. Tried npm test and yarn test in that Stackblitz example, both failed.

[atk]

As I already stated, you need to use pnpm. npm and yarn force their resolver on vite, which somehiow breaks the module resolution, because it attempts to get two different versions of solid, which leads to a mix-up between he server and the dev version. I'm still trying to get to the bottom of this.

[giftkugel]

As I already stated, you need to use pnpm. npm and yarn force their resolver on vite, which somehiow breaks the module resolution, because it attempts to get two different versions of solid, which leads to a mix-up between he server and the dev version. I'm still trying to get to the bottom of this.

Ok, it works with pnpm so far ... but it is really bad to be forced by a template to use a specific package manager 🙄

On my local machine I may be able to use pnpm, but on a company CI/CD I may not ...

[michaelspiss]

I've done some investigation. Npm resolves the exports."./web"."node" version in solid-js's package.json. There, replacing server.[c]js with dev.[c]js (or web.[c]js) runs the tests. This is of course not a solution, but may help solving this problem.

I've also tried getting the browser version by adding the @rollup/plugin-node-resolve plugin to vite, but with no luck.

[atk]

Using a custom resolver might be our best option. I'm currently busy with the rewrite of @solid-primitives/fetch, but this is on my to-do list right after that.

[michaelspiss]

I'd like it better if we found a way to fix the underlying issue than work around it. I found a similar issue discussed in the vite-plugin-solid repository, which is essentially this problem in reverse.

[thojanssens]

Running pnpm install, I have the same error as OP:

[email protected] postinstall C:\data\projects\myapp node ./fix-jest-dom.mjs

file:///C:/data/projects/myapp/fix-jest-dom.mjs:8 if (err) throw err; [Error: ENOENT: no such file or directory, open 'C:\data\projects\myapp\node_modules\@types\testing-library__jest-dom\index.d.ts']

[thojanssens]

Solved my pnpm install issue by running:

npm i @types/testing-library__jest-dom

Looks like a dependency is missing in this template.

[Akiyamka]

Solved my pnpm install issue by running:

npm i @types/testing-library__jest-dom

Looks like a dependency is missing in this template.

npm i @types/testing-library__jest-dom

failed with

npm ERR! Cannot read properties of null (reading 'matches')

but

pnpm i @types/testing-library__jest-dom

solve postinstall script crashes.

Env: npm: 8.12.1 pnpm: 7.5.0 (corepack) node: v18.4.0