SolidJS•2y ago

TypeError when using `createResource` in vitest

I'm new to Solidjs, and I'm learing how to test functions in vitest, it cause the error TypeError: Cannot read properties of undefined (reading 'id'), does anyone know how to solve it? there is no solution when asking ChatGPT🥲

describe('test createResource', () => {
  test('res', async () => {
    const [num, setNum] = createSignal(1)
    const fetchUser = async (id: number) => id + 1
    const [foo, { mutate, refetch }] = createResource(num, fetchUser)
    console.log(foo.loading)
  })
})

describe('test createResource', () => {
  test('res', async () => {
    const [num, setNum] = createSignal(1)
    const fetchUser = async (id: number) => id + 1
    const [foo, { mutate, refetch }] = createResource(num, fetchUser)
    console.log(foo.loading)
  })
})

my packages

"devDependencies": {
    "@solidjs/testing-library": "^0.7.0",
    "happy-dom": "^9.9.2",
    "solid-js": "^1.7.3",
    "typescript": "5.0.4",
    "vite": "^4.3.1",
    "vitest": "^0.30.1"
  },

"devDependencies": {
    "@solidjs/testing-library": "^0.7.0",
    "happy-dom": "^9.9.2",
    "solid-js": "^1.7.3",
    "typescript": "5.0.4",
    "vite": "^4.3.1",
    "vitest": "^0.30.1"
  },

6 Replies

Alex Lohr•2y ago

what is your vitest config? it looks like your error does not refer to the test that you have shown. because it tries to read [something].id when [something] is undefined.

subframe7536OP•2y ago

import { defineConfig } from 'vitest/config'
export default defineConfig({
  test: {
    environment: 'happy-dom',
  },
})

import { defineConfig } from 'vitest/config'
export default defineConfig({
  test: {
    environment: 'happy-dom',
  },
})

full error log is here

TypeError: Cannot read properties of undefined (reading 'id')
 ❯ Module.createResource node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:438:35
 ❯ test/index.test.ts:39:40
     38|     const fetchUser = async (id: number) => id + 1
     39|     const [foo, { mutate, refetch }] = createResource(num, fetchUser)
     40|     console.log(foo.loading)
       |        ^
     41|   })
     42| })

TypeError: Cannot read properties of undefined (reading 'id')
 ❯ Module.createResource node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:438:35
 ❯ test/index.test.ts:39:40
     38|     const fetchUser = async (id: number) => id + 1
     39|     const [foo, { mutate, refetch }] = createResource(num, fetchUser)
     40|     console.log(foo.loading)
       |        ^
     41|   })
     42| })

Alex Lohr•2y ago

You need to setup the resolver to test in dev mode:

{
  test: ...,
  resolve: {
    conditions: ['development', 'browser'],
  },

{
  test: ...,
  resolve: {
    conditions: ['development', 'browser'],
  },

Sorry for the late reply by the way, I was swamped with meetings.

subframe7536OP•2y ago

thanks! it works! btw, I wrap the test code with createRoot, as the warning say computations created outside a createRoot or render will never be disposed

Alex Lohr•2y ago

If you want to test effects asynchronously, have a look at testEffect from our testing library (I'm pretty happy I added it). Otherwise, createRoot will suffice.

Alex Lohr•2y ago

That's the pattern that I use to test resources: https://github.com/solidjs-community/solid-primitives/blob/main/packages/resource/test/index.test.ts#L178

GitHub

solid-primitives/index.test.ts at main · solidjs-community/solid-pr...

A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/index.test.ts at main · solidjs-community/solid-primitives

Gaming

Programming

TypeError when using `createResource` in vitest