MaveriX89 Posts - Answer Overflow

MaveriX89

•Created by MaveriX89 on 4/30/2024 in #support

Vite 5.2.x / Vitest 1.5.x: How to Resolve Multiple Instances of Solid

I am nearing my wits end trying to resolve these error messages I receive when trying to run my SolidJS tests with @solidjs/testing-library and vitest

stderr | file:~/Developer/github/.../nm/node_modules/solid-js/dist/dev.js:1932:13
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

stderr | src/__tests__/App.test.tsx > <App /> > it will render an text input and a button
computations created outside a `createRoot` or `render` will never be disposed

stderr | file:~/Developer/github/.../nm/node_modules/solid-js/dist/dev.js:1932:13
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

stderr | src/__tests__/App.test.tsx > <App /> > it will render an text input and a button
computations created outside a `createRoot` or `render` will never be disposed

I do not know what else to try and need assistance if anyone can help. I have the following vite.config.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import { configDefaults } from "vitest/config";

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
    proxy: {
      // Proxy API requests to the backend port in development
      "/api": "http://localhost:8000",
    },
  },
  build: {
    target: "esnext",
    copyPublicDir: false,
  },
  resolve: {
    conditions: ["development", "browser"],
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.ts"],
    testTransformMode: { web: ["/.[jt]sx?$/"] },
    server: {
      deps: {
        inline: [/solid-js/],
      },
    },
    deps: {
      optimizer: {
        web: {
          enabled: true,
          include: ['solid-js'],
        }
      }
    },
    coverage: {
      all: true,
      provider: "istanbul",
      thresholds: {
        "100": true,
      },
    },
  },
});

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import { configDefaults } from "vitest/config";

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
    proxy: {
      // Proxy API requests to the backend port in development
      "/api": "http://localhost:8000",
    },
  },
  build: {
    target: "esnext",
    copyPublicDir: false,
  },
  resolve: {
    conditions: ["development", "browser"],
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.ts"],
    testTransformMode: { web: ["/.[jt]sx?$/"] },
    server: {
      deps: {
        inline: [/solid-js/],
      },
    },
    deps: {
      optimizer: {
        web: {
          enabled: true,
          include: ['solid-js'],
        }
      }
    },
    coverage: {
      all: true,
      provider: "istanbul",
      thresholds: {
        "100": true,
      },
    },
  },
});

In my package.json these are the dependencies I have:

{
  "dependencies": {
    "@elysiajs/static": "^1.0.3",
    "elysia": "^1.0.15",
    "solid-js": "^1.8.17"
  },
  "devDependencies": {
    "@elysiajs/eden": "^1.0.12",
    "@solidjs/testing-library": "^0.8.7",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/user-event": "^14.5.2",
    "@types/bun": "^1.1.0",
    "@types/node": "20.10.0",
    "@typescript-eslint/eslint-plugin": "^7.7.1",
    "@typescript-eslint/parser": "^7.7.1",
    "@vitest/coverage-istanbul": "^1.5.2",
    "eslint": "^8.56.0",
    "eslint-plugin-simple-import-sort": "^12.1.0",
    "eslint-plugin-solid": "^0.14.0",
    "jsdom": "^24.0.0",
    "prettier": "^3.2.5",
    "typescript": "5.4.5",
    "vite": "^5.2.10",
    "vite-plugin-solid": "^2.10.2",
    "vitest": "^1.5.2"
  },
}

{
  "dependencies": {
    "@elysiajs/static": "^1.0.3",
    "elysia": "^1.0.15",
    "solid-js": "^1.8.17"
  },
  "devDependencies": {
    "@elysiajs/eden": "^1.0.12",
    "@solidjs/testing-library": "^0.8.7",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/user-event": "^14.5.2",
    "@types/bun": "^1.1.0",
    "@types/node": "20.10.0",
    "@typescript-eslint/eslint-plugin": "^7.7.1",
    "@typescript-eslint/parser": "^7.7.1",
    "@vitest/coverage-istanbul": "^1.5.2",
    "eslint": "^8.56.0",
    "eslint-plugin-simple-import-sort": "^12.1.0",
    "eslint-plugin-solid": "^0.14.0",
    "jsdom": "^24.0.0",
    "prettier": "^3.2.5",
    "typescript": "5.4.5",
    "vite": "^5.2.10",
    "vite-plugin-solid": "^2.10.2",
    "vitest": "^1.5.2"
  },
}

6 replies

SSolidJS

•Created by MaveriX89 on 2/4/2024 in #support

How to handle necessary async/await work inside of a createEffect?

I'm building a SolidJS hook library and I have some asynchronous work that needs to happen which is occurring in a createEffect. I'm currently trying to write integration tests against my hook library and running into problems because I'm currently not awaiting the Promise result which is conflicting with other things occurirng in test. The way I work around it for testing purposes is literally doing an await sleep(1000) in test to wait for that asynchronous work to finish. Is there a better way to write my createEffect in such a way where I do not have to do a sleep in test?

function createDocument<T extends DocRecord<T>>(initialDocFn: Accessor<Doc<T>>): CreateDocumentResult<T> {
  const [doc, setDoc] = createSignal(initialDocFn());
  const initialDocId = () => initialDocFn()._id;

  const refreshDoc = async (db: Database, docId = "") => {
    const storedDoc = await db.get<T>(docId).catch(initialDocFn);
    setDoc(() => storedDoc);
  };

  createEffect(() => {
    // This is the problematic instruction. How can I re-express this to properly await it?
    void refreshDoc(database(), initialDocId());
  });
}

function createDocument<T extends DocRecord<T>>(initialDocFn: Accessor<Doc<T>>): CreateDocumentResult<T> {
  const [doc, setDoc] = createSignal(initialDocFn());
  const initialDocId = () => initialDocFn()._id;

  const refreshDoc = async (db: Database, docId = "") => {
    const storedDoc = await db.get<T>(docId).catch(initialDocFn);
    setDoc(() => storedDoc);
  };

  createEffect(() => {
    // This is the problematic instruction. How can I re-express this to properly await it?
    void refreshDoc(database(), initialDocId());
  });
}

8 replies

SSolidJS

•Created by MaveriX89 on 1/28/2024 in #support

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?

26 replies

SSolidJS

•Created by MaveriX89 on 1/27/2024 in #support

Creating custom SolidJS hook that can be used in a global scope

Need some help understanding how to build a custom SolidJS hook that can be used both locally inside a component and outside in the global scope (like createSignal can). Below is. a small snippet of a custom hook I am writing:

export function createDatabase(dbOrName?: string | Database, config: ConfigOpts = {}): CreateDatabase {

  const database = createMemo(() => (isDatabase(dbOrName) ? dbOrName : genDb(dbOrName || "DefaultDB", config)));

return { database }

export function createDatabase(dbOrName?: string | Database, config: ConfigOpts = {}): CreateDatabase {

  const database = createMemo(() => (isDatabase(dbOrName) ? dbOrName : genDb(dbOrName || "DefaultDB", config)));

return { database }

The question I have is around the floating createMemo that I use in the implementation. When I use the createDatabase hook globally, I get greeted with the console warning: computations created outside a 'createRoot' or 'render' will never be disposed I'm not familiar with how to properly address that warning and hoping the community can offer some guidance here.

17 replies

SSolidJS

•Created by MaveriX89 on 1/1/2024 in #support

Need clarity on eslint(solid/reactivity) warning use-case

I need help understanding how to deal with this ESLint warning when I am building a custom SolidJS hook library that doesn't have any visual components. There is a portion of my custom hook code that gets called out by this warning and I don't know how I should properly resolve it (or if it is safe to ignore it). The code snippet where I receive the warning is the following:

import { Accessor, createSignal, onMount, onCleanup } from "solid-js";

type LiveQueryResult = {
  readonly docs: Doc[];
  readonly rows: any[];
};

// NOTE: database is an accessor defined outside of this custom hook (via createMemo). createLiveQuery is effectively the inner function of an outer closure.
const createLiveQuery = (key: string, query = {}, initialRows: any[] = []): Accessor<LiveQueryResult> => {
    const [result, setResult] = createSignal({
      rows: initialRows,
      docs: initialRows.map((r) => r.doc),
    });

    const refreshRows = async () => {
      const res = await database().query(key, query);
      setResult({ ...res, docs: res.rows.map((r) => r.doc) });
    };

    onMount(() => {
      // this is where I receive the ESLint warning. Specifically on the callback passed to subscribe as the `refreshRows` function has internal reactivity due to using database() under the hood.
      const unsubscribe = database().subscribe(() => void refreshRows());

      onCleanup(() => {
        unsubscribe();
      });
    });

    return result;
  };

import { Accessor, createSignal, onMount, onCleanup } from "solid-js";

type LiveQueryResult = {
  readonly docs: Doc[];
  readonly rows: any[];
};

// NOTE: database is an accessor defined outside of this custom hook (via createMemo). createLiveQuery is effectively the inner function of an outer closure.
const createLiveQuery = (key: string, query = {}, initialRows: any[] = []): Accessor<LiveQueryResult> => {
    const [result, setResult] = createSignal({
      rows: initialRows,
      docs: initialRows.map((r) => r.doc),
    });

    const refreshRows = async () => {
      const res = await database().query(key, query);
      setResult({ ...res, docs: res.rows.map((r) => r.doc) });
    };

    onMount(() => {
      // this is where I receive the ESLint warning. Specifically on the callback passed to subscribe as the `refreshRows` function has internal reactivity due to using database() under the hood.
      const unsubscribe = database().subscribe(() => void refreshRows());

      onCleanup(() => {
        unsubscribe();
      });
    });

    return result;
  };

What is the proper way to address the warning in this case? Or is this something I can safely ignore perhaps?

5 replies

Gaming

Programming