SolidJS + Vitest doesn't render components in tests

hbibel commented 9 months ago

Astro Info

Astro                    v4.3.7
Node                     v20.11.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/solid-js

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I've set up a new project from the "with-vitest" starter template. I've added the Astro-SolidJS integration and the dependencies recommended by the SolidJS team to run tests with vitest as in this example.

When I run a test for a component, the test fails because the component will not render in the test. Examplary test output:

TestingLibraryElementError: Unable to find an element with the placeholder text of: new todo here

Ignored nodes: comments, script, style
<body>
  <div />
</body>
 ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 ❯ src/components/TodoList.test.tsx:10:19
      8|     render(() => <TodoList />);
      9|     screen.debug();
     10|     expect(screen.getByPlaceholderText("new todo here")).not.toBeNull();
       |                   ^
     11|   });
     12| });

Note the

<body>
  <div />
</body>

indicating that render does not properly render the component.

I've tried tinkering with the config files, but the problem persists. Interestingly, a project with similar setup, but with Jest instead of vitest, works.

Please let me know if I can provide any more information.

What's the expected result?

I can test my SolidJS components with vitest.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-ukdsqc

Participation

[ ] I am willing to submit a pull request for this issue.

matthewp commented 9 months ago

What does this have to do with Astro?

hbibel commented 9 months ago

What does this have to do with Astro?

A standalone SolidJS project works just fine with vitest. It's only the combination Astro + Solid + vitest that refuses to render in tests. Astro supports both Solid and vitest, so my assumption is that other people may want to use this combination as well.

ematipico commented 9 months ago

@hbibel if you're testing solid component, you should not use the astro vite configuration when running the tests. We surely not endorse this kind of setting, as we don't have a "testing story yet". You should set your vitest environment by using only the solid-vite configuration.

That's not definitely a bug from our side.

withastro / astro