SolidJS•2y ago

Getting ReferenceError: React is not defined with Vitest + Solid Testing Library

I honestly have no idea how I am receiving this error but I am despite testing using @solidjs/testing-library. Moreover, I am using Vitest by itself (not Vite) and my vitest.config.ts is as follows:

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.ts"],
    deps: {
      optimizer: {
        web: { enabled: true },
        ssr: { enabled: true },
      },
    },
    isolate: false,
    coverage: {
      provider: "istanbul",
    },
  },
});

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.ts"],
    deps: {
      optimizer: {
        web: { enabled: true },
        ssr: { enabled: true },
      },
    },
    isolate: false,
    coverage: {
      provider: "istanbul",
    },
  },
});

The test that is causing the error to appear is a custom Solid hook test where I am attempting to pass a wrapper to my renderHook invocation.

import { renderHook } from "@solidjs/testing-library";
import { describe, expect, it } from "vitest";

import { createDbQuery } from "../createDbQuery";

function FakeComponent() {
  return <div />
}

describe("HOOK: createDbQuery", () => {
  it("can be used as expected", async () => {
    const { result } = renderHook(() => createDbQuery((d) => d), { wrapper: FakeComponent });
    const db = createDbQuery.database();

    expect(result()).toEqual({ rows: [], docs: [] });
    await db.put({ good: true });
    expect(result().docs.length).toBe(1);
  });
});

import { renderHook } from "@solidjs/testing-library";
import { describe, expect, it } from "vitest";

import { createDbQuery } from "../createDbQuery";

function FakeComponent() {
  return <div />
}

describe("HOOK: createDbQuery", () => {
  it("can be used as expected", async () => {
    const { result } = renderHook(() => createDbQuery((d) => d), { wrapper: FakeComponent });
    const db = createDbQuery.database();

    expect(result()).toEqual({ rows: [], docs: [] });
    await db.put({ good: true });
    expect(result().docs.length).toBe(1);
  });
});

ReferenceError: React is not defined
 ❯ Object.FakeComponent [as wrapper] src/__tests__/createDbQuery.test.tsx:7:3
      5| 
      6| function FakeComponent() {
      7|   return <div />
       |   ^
      8| }
      9|

ReferenceError: React is not defined
 ❯ Object.FakeComponent [as wrapper] src/__tests__/createDbQuery.test.tsx:7:3
      5| 
      6| function FakeComponent() {
      7|   return <div />
       |   ^
      8| }
      9|

Anybody seen that before?

16 Replies

Alex Lohr•2y ago

You missed plugins: [solid()] that needs to be imported from vite-plugin-solid. And you can lose the deps, our plugin already does the required configuration.

danchezOP•2y ago

@Alex Lohr is there any way to get it working with just Vitest? Or do I have to use Vitest through a Vite config?

thetarnav•2y ago

you can use vite plugins in “just vitest” isn’t vite its dependency?

danchezOP•2y ago

I’ve just installed Vitest and created a vitest.config.ts and everything worked until I tried to create a wrapper component In my case I’m just building a custom SolidJS hooks library

thetarnav•2y ago

well you need solid’s jsx compiler if you want to use jsx with solid regardless of of its vite, vitest, jest, or whatever but also if it’s a library that has nothing to do with rendering, then there is no point in adding rendering to unit tests you can test most functionality with just createRoot, that’s what we usually do in solid-primitives we use vitest as well

Alex Lohr•2y ago

if you have a vitest.config.js, you need to copy the parts of vite.config.js that let solid do its precompilation and avoid requiring React for JSX over. That is, if you don't have solid-start, this should work, otherwise, you still need the vitest.config.ts.

danchezOP•2y ago

@Alex Lohr what parts are those exactly?

Alex Lohr•2y ago

Basically, the vite-plugin-solid, like I said. I'm currently trying to fix testing in solid-start, too.

danchezOP•2y ago

Ah, interesting, let me try that then. So I just wrap my hooks with a createRoot call in test?

Alex Lohr•2y ago

Exactly.

danchezOP•2y ago

Excellent — let me see if I can get away with just doing that then @Alex Lohr holy crapola! Wrapping with createRoot in test worked! So wait, is it safe to say there's no need to use renderHook from @solidjs/testing-library for hook libraries?

Alex Lohr•2y ago

renderHook is only there if you want to test your hooks in a JSX context (e.g. to wrap it in a provider). otherwise, createRoot suffices. If you are not using that, you can forgo testing-library, because that's only used to test stuff from a user's perspective within an rendered page (or an approximate representation of one).

danchezOP•2y ago

So incredible — this just removed a heavy blocker I was dealing with in test. Thank you so much!!

Alex Lohr•2y ago

I should probably add a few lines to the README of our testing library. To unblock other people with the same issues.

danchezOP•2y ago

@Alex Lohr I think that’s a great idea. I think emphasizing that point of being able to rely on createRoot and linking to examples demonstrating that technique would be perfect. In my head, I had the impression that I needed to use the Solid Testing Library for anything and everything related to Solid

Alex Lohr•2y ago

I feel the testing-library is the focus point for all testing-related issues that are usually rather related to the vite plugin or wrong configuration. By the way, we do have testEffect in our testing library, this sets up createRoot in a Promise to be returned for the test and also to capture errors correctly. It doesn't use the React stuff, so it should work fine. OK, added a few lines.

Gaming

Programming

Getting ReferenceError: React is not defined with Vitest + Solid Testing Library

Did you find this page helpful?