Testing difficulties in solid-start

I'm running into some perplexing errors with Vitest in my SSR-enabled Solid Start app. In the imports two files, I get

Cannot set properties of undefined (setting 'modhash')

Cannot set properties of undefined (setting 'modhash')

. In one, it's caused by

import { isBefore, parseISO } from "date-fns"

import { isBefore, parseISO } from "date-fns"

. In the other, by

import { CentralStoreContext } from "../root"

import { CentralStoreContext } from "../root"

.

In at least one of the test files, I've done my best to abstract the component being tested away from the routing, but I'm still getting this error.

My

root.tsx

root.tsx

...

export const CentralStoreContext =
  createContext<ReturnType<typeof useCentralStore>>()

export default function Root() {
  const ctx = useCentralStore()
  const location = useLocation()
  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - With TailwindCSS</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <Suspense>
          <SessionProvider>
            <Sidebar />
            <CentralStoreContext.Provider value={ctx}>
              <Routes>
                <FileRoutes />
              </Routes>
            </CentralStoreContext.Provider>
            <Scripts />
          </SessionProvider>
        </Suspense>
      </Body>
    </Html>
  )
}

...

export const CentralStoreContext =
  createContext<ReturnType<typeof useCentralStore>>()

export default function Root() {
  const ctx = useCentralStore()
  const location = useLocation()
  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - With TailwindCSS</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <Suspense>
          <SessionProvider>
            <Sidebar />
            <CentralStoreContext.Provider value={ctx}>
              <Routes>
                <FileRoutes />
              </Routes>
            </CentralStoreContext.Provider>
            <Scripts />
          </SessionProvider>
        </Suspense>
      </Body>
    </Html>
  )
}

And my

vitest.config.ts

vitest.config.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above
import { defineConfig } from "vite"
import solid from "solid-start/vite"
export default defineConfig({
  plugins: [solid()],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
  test: {
    environment: "jsdom",
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
  },
  resolve: { conditions: ["development", "browser"] },
})

/// <reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above
import { defineConfig } from "vite"
import solid from "solid-start/vite"
export default defineConfig({
  plugins: [solid()],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
  test: {
    environment: "jsdom",
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
  },
  resolve: { conditions: ["development", "browser"] },
})

SolidJS•3y ago•

25 replies

Nathan

Testing difficulties in solid-start

I'm running into some perplexing errors with Vitest in my SSR-enabled Solid Start app. In the imports two files, I get

Cannot set properties of undefined (setting 'modhash')

Cannot set properties of undefined (setting 'modhash')

. In one, it's caused by

import { isBefore, parseISO } from "date-fns"

import { isBefore, parseISO } from "date-fns"

. In the other, by

import { CentralStoreContext } from "../root"

import { CentralStoreContext } from "../root"

.

In at least one of the test files, I've done my best to abstract the component being tested away from the routing, but I'm still getting this error.

My

root.tsx

root.tsx

...

export const CentralStoreContext =
  createContext<ReturnType<typeof useCentralStore>>()

export default function Root() {
  const ctx = useCentralStore()
  const location = useLocation()
  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - With TailwindCSS</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <Suspense>
          <SessionProvider>
            <Sidebar />
            <CentralStoreContext.Provider value={ctx}>
              <Routes>
                <FileRoutes />
              </Routes>
            </CentralStoreContext.Provider>
            <Scripts />
          </SessionProvider>
        </Suspense>
      </Body>
    </Html>
  )
}

...

export const CentralStoreContext =
  createContext<ReturnType<typeof useCentralStore>>()

export default function Root() {
  const ctx = useCentralStore()
  const location = useLocation()
  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - With TailwindCSS</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <Suspense>
          <SessionProvider>
            <Sidebar />
            <CentralStoreContext.Provider value={ctx}>
              <Routes>
                <FileRoutes />
              </Routes>
            </CentralStoreContext.Provider>
            <Scripts />
          </SessionProvider>
        </Suspense>
      </Body>
    </Html>
  )
}

And my

vitest.config.ts

vitest.config.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above
import { defineConfig } from "vite"
import solid from "solid-start/vite"
export default defineConfig({
  plugins: [solid()],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
  test: {
    environment: "jsdom",
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
  },
  resolve: { conditions: ["development", "browser"] },
})

/// <reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above
import { defineConfig } from "vite"
import solid from "solid-start/vite"
export default defineConfig({
  plugins: [solid()],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
  test: {
    environment: "jsdom",
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
  },
  resolve: { conditions: ["development", "browser"] },
})

Testing difficulties in solid-start

Similar Threads

Testing difficulties in solid-start

Similar Threads

Similar Threads

Similar Threads