SolidJS•8mo 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•8mo 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.

MaveriX89•8mo 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•8mo ago

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

MaveriX89•8mo 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•8mo 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•8mo 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.

MaveriX89•8mo ago

@Alex Lohr what parts are those exactly?

Alex Lohr•8mo ago

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

MaveriX89•8mo ago

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

Alex Lohr•8mo ago

Exactly.

MaveriX89•8mo 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•8mo 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).

MaveriX89•8mo ago

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

Alex Lohr•8mo ago

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

MaveriX89•8mo 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

Gaming

Programming

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