Search code examples
typescriptvue.jsnpmvitevitest

Can't run tests on vitest with json-big


For some reason my typescript/vue with vite setup runs fine but trying to run tests just won't work. Here's the (i think) relevant files:

package.json

{
  "name": "vite-vue-typescript-starter",
  "version": "0.1.4",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build --base /smgreenhousemanager",
    "test": "vitest run --coverage",
    "format": "prettier --write .",
    "typecheck": "vue-tsc --noEmit"
  },
  "dependencies": {
    "@pixi/math-extras": "^6.4.2",
    "axios": "0.25.0",
    "json-big": "^1.0.2",
    "lodash": "^4.17.21",
    "mitt": "^3.0.0",
    "pinia": "^2.0.13",
    "pixi-viewport": "^4.34.4",
    "pixi.js": "^6.4.2",
    "pixi.js-keyboard": "^1.1.6",
    "pixi.js-mouse": "^1.1.6",
    "ts-toolbelt": "^9.6.0",
    "uuid": "^8.3.2",
    "vue": "^3.2.26"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.182",
    "@types/node": "^18.6.2",
    "@types/uuid": "^8.3.4",
    "@vitejs/plugin-vue": "^2.2.0",
    "@vitest/coverage-c8": "^0.22.0",
    "@vue/compiler-sfc": "^3.2.23",
    "happy-dom": "^6.0.4",
    "jsdom": "^20.0.0",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
    "vitest": "^0.22.0",
    "vue-tsc": "^0.29.8"
  }
}

vite.config.ts

// https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-
/// <reference types="vitest" />

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import process from "process"

const httpPort: string = process.env.HTTP_PORT || '8069' // This parallels our backend declaration in service.py.
const backendUrl: string = process.env.BACKEND_URL || `localhost:${httpPort}`

export default defineConfig({
    plugins: [vue()],
    define: {
        'BACKEND_URL': `"${backendUrl}"`
    },
    build: {
        target: 'esnext'
    },
    test: {
        environment : "happy-dom"
    }
})

utils.test.ts

import { expect, test } from 'vitest'
import {Rectangle} from "pixi.js";
import {normaliseRectangleShape} from "../lib/utils";

test('normalised rectangle nominal', () => {
    const rect = new Rectangle(0, 0, 50, 50)
    const normalised = normaliseRectangleShape(rect)

    expect(normalised.x).toBe(0)
    // expect(normalised).toHaveProperty('y', 0)
    // expect(normalised).toHaveProperty('width', 50)
    // expect(normalised).toHaveProperty('height', 50)
})

Importing normaliseRectangleShape eventually end up importing json-big because of other utils function in its file. I have this output with vitest run:

/usr/local/bin/npm test

> vite-vue-typescript-starter@0.1.4 test
> vitest run


 RUN  v0.22.0 /home/chuck/PyCharm/smgreenhousemanager

 ❯ frontend/src/tests/utils.test.ts (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  frontend/src/tests/utils.test.ts [ frontend/src/tests/utils.test.ts ]
Error: Failed to resolve entry for package "json-big". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "json-big". The package may have incorrect main/module/exports specified in its package.json.
 ❯ packageEntryFailure node_modules/vite/dist/node/chunks/dep-689425f3.js:40970:11
 ❯ resolvePackageEntry node_modules/vite/dist/node/chunks/dep-689425f3.js:40966:9
 ❯ tryNodeResolve node_modules/vite/dist/node/chunks/dep-689425f3.js:40773:20
 ❯ Context.resolveId node_modules/vite/dist/node/chunks/dep-689425f3.js:40581:28
 ❯ Object.resolveId node_modules/vite/dist/node/chunks/dep-689425f3.js:39254:55
 ❯ TransformContext.resolve node_modules/vite/dist/node/chunks/dep-689425f3.js:39028:23
 ❯ normalizeUrl node_modules/vite/dist/node/chunks/dep-689425f3.js:58354:34
 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-689425f3.js:58509:57
 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-689425f3.js:39317:30

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Test Files  1 failed (1)
     Tests  no tests
  Start at  15:52:06
  Duration  1.11s (setup 0ms, collect 0ms, tests 0ms)


Process finished with exit code 1
  • I tried fiddleing with the vite config with the deps options from vitest
  • I tried deleting node modules and reinstalling
  • I'm running node v16.16.0 and npm v8.17.0 on Linux Mint (Vanessa)

Solution

  • I ended up using json-bigint-patch instead and requiring it in a beforeAll in my setup file:

    import {beforeAll} from 'vitest'
    
    beforeAll(() => {
      require('json-bigint-patch')  // Ensures all tests have the patched JSON
    })