TypeError [ERR_INVALID_ARG_TYPE] #72

YogliB · 2021-09-09T20:27:13Z

Having trouble running tests, here's a demo repo.

I'm using it with SvelteKit and pnpm on Windows 10.

PS D:\Projects\svelte-component-template> pnpm test

> ~TODO~@0.0.1 test D:\Projects\svelte-component-template
> cross-env NODE_OPTIONS=--experimental-vm-modules jest src --config jest.config.json

(node:25868) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:28608) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:38792) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 FAIL  src/lib/first/First.test.js
  ● Test suite failed to run

    TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of URL

      at node_modules/.pnpm/svelte-jester@2.1.1_jest@27.1.1+svelte@3.42.4/node_modules/svelte-jester/dist/transformer.cjs:80:118

sebastianrothe · 2021-09-10T15:30:58Z

Seems to be related to Windows again. I will have a look at it tonight.

asode · 2021-09-16T10:48:32Z

I'm not sure if this is related (or just my mistake) but I was trying to run the latest master branch locally and got this:

asode@mycomp:~/coding/my-svelte-project$ npx jest

internal/process/promises.js:213
        triggerUncaughtException(err, true /* fromPromise */);
        ^

TypeError [ERR_INVALID_ARG_TYPE]: The "chunk" argument must be of type string or an instance of Buffer or Uint8Array. Received an instance of SyntaxError
    at Socket.Writable.write (internal/streams/writable.js:285:13)
    at file:///home/asode/coding/svelte-jester/dist/preprocess.js:21:32 {
  code: 'ERR_INVALID_ARG_TYPE'
}
 1: 0xa24ed0 node::Abort() [node]
 2: 0xa2701d  [node]
 3: 0xc06acb  [node]
 4: 0xc08076  [node]
 5: 0xc086f6 v8::internal::Builtin_HandleApiCall(int, unsigned long*, v8::internal::Isolate*) [node]
 6: 0x1427159  [node]
Aborted

sebastianrothe · 2021-09-19T14:13:13Z

Seems to be related to Windows again. I will have a look at it tonight.

The tests run on Windows. So this is not the problem. The repo you linked is ESM and the test command also enables this mode. BUT the transformer, that is used, is a CJS transformer. There seems to be something wrong with the whole setup.

sebastianrothe · 2021-09-19T19:13:21Z

It is definitely a bug, which is not covered by our current tests. Jest chooses the CJS transformer, but runs the processAsync code. That's where it fails. We need to add a test for this case.

BUT, why is Jest choosing the CJS version?

sebastianrothe · 2021-09-20T08:47:23Z

I tried some variations of exports in package.json, but the only way to convince Jest to use the ESM transformer was to have the ESM version as the default export. I don't know, if this will work for the CJS transformer then.

See

mtempleheald · 2021-10-30T14:16:13Z

I encountered the issue above and found this chat helpful in resolving my test failures.

renamed svelte.config.jest.cjs to svelte.config.jest.js
updated jest.config.cjs preprocess link to match

I then encountered "ReferenceError: document is not defined" & "using the wrong test environment".
Adding

/**
 * @jest-environment jsdom
 */

to the top of my test file fixed that.
https://jestjs.io/docs/configuration#testenvironment-string
Hope this helps

akesson · 2021-11-15T10:24:08Z

Same issue for me, but the above doesn't fix it :(

akesson · 2021-11-15T11:18:10Z

Starts happening when preprocessing is enabled in jest.config.js:

  "transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.svelte$": ["svelte-jester", { "preprocess": true }]
  },

Happens even when there is no pre-processing configured in svelte.config.js

Unfortunately, I need that preprocessing.

ghost · 2021-11-25T10:29:32Z

Any update on this?
Does anyone make it work with TypeScript?

@mtempleheald could you please share your working config?

gspetrou · 2021-11-28T01:38:02Z

I am encountering the same issue on macOS (Monterey). Its currently blocking me from collecting coverage :(

gagbo · 2021-11-30T10:20:52Z

From looking at ts-jest.log, I noticed that the

  transform: {
    "^.+\\.svelte$": [
      "svelte-jester",
      { preprocess: "./svelte.config.test.cjs" },
    ],
    "^.+\\.ts$": "ts-jest",
  },

got transformed into /path/to//node_modules/svelte-jester/dist/transformer.cjs. So I thought that maybe it's jest that transformed the raw string into a require, which in turn loaded the cjs file. I replaced it with

  transform: {
    "^.+\\.svelte$": [
      "<rootDir>/node_modules/svelte-jester/dist/transformer.mjs",
      { preprocess: "./svelte.config.test.cjs" },
    ],
    "^.+\\.ts$": "ts-jest",
  },

And it seemed to work. As js/ts is not my thing, I'll just add all the seemingly random things that my jest config has now

// jest.config.ts
import type { Config } from "@jest/types";

const config: Config.InitialOptions = {
  verbose: true,
  preset: "ts-jest/presets/default-esm",
  transform: {
    "^.+\\.svelte$": [
      "<rootDir>/node_modules/svelte-jester/dist/transformer.mjs",
      { preprocess: "./svelte.config.test.cjs" }, // holds the most default svelte-preprocess ever
    ],
    "^.+\\.ts$": "ts-jest",
  },
  moduleFileExtensions: ["js", "ts", "svelte"],
  testEnvironment: "jsdom",
  moduleNameMapper: {
    "^\\$lib(.*)$": "<rootDir>/src/lib$1",
    "^\\$app(.*)$": [
      "<rootDir>/.svelte-kit/dev/runtime/app$1",
      "<rootDir>/.svelte-kit/build/runtime/app$1",
    ],
  },
  setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"],
  collectCoverageFrom: ["src/**/*.{ts,tsx,svelte,js,jsx}"],
  transformIgnorePatterns: [],
  extensionsToTreatAsEsm: [".ts", ".svelte"],
  globals: {
    "ts-jest": {
      babelConfig: true,
      useESM: true,
    },
  },
};

export default config;

rvisharma · 2021-12-18T20:47:52Z

Was facing same issue for untested svelte files.
Came up with a workaround - #90 (comment)

adyshev · 2022-01-20T13:57:12Z

Same issue under osx.

Failed to collect coverage from ./About.svelte
ERROR: The "id" argument must be of type string. Received an instance of URL
STACK: TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of URL
at new NodeError (node:internal/errors:371:5)
at validateString (node:internal/validators:119:11)
at Module.require (node:internal/modules/cjs/loader:992:3)
at require (node:internal/modules/cjs/helpers:102:18)
at /Users/adyshev/Projects/Javascript/ecb/ecb-frontend/node_modules/svelte-jester/dist/transformer.cjs:79:118
at processTicksAndRejections (node:internal/process/task_queues:96:5)

nika-d · 2022-01-25T16:16:32Z

Hi, @mdi22 and i had similar problems, and found a working solution (after 3 frustrating days 🙈). Here comes the solution just in case someone stumbles upon that thread like we did during troubleshooting. Actually, it is not easy to choose the right place where to put the solution, because of all the different technologies included in our stack:

Our stack:

Jest
Svelte 3
@testing-library/svelte
Typescript
Bootstrap 5
(rollup for bundling, not for tests)
node 16

(Other system properties dont matter, we are using osx, linux and windows for development.)

Goal was to have a testing setup for custom svelte components, including coverage and debugging. Our custom components may depend on imported Typescript and/or Bootstrap code.

These errors came up at some point in time during working on the test setup (some mentioned by others in posts above too, anyway, this list is not complete):

SyntaxError: Cannot use import statement outside a module
something like "you must use import to use this module" on a line where "import" was the first word
TypeError [ERR_INVALID_ARG_TYPE]: The "chunk" argument must be of type string or an instance of Buffer or Uint8Array. Received an instance of SyntaxError ...
TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of URL ...
debugging didnt work

We managed to fix all that. Here is a working subset of our project code, when reading it, take *.test.ts as entry points:
frontend.zip

Main points of the solution:

always running node with option "--experimental-vm-modules" (for example npx --node-options "--experimental-vm-modules" jest )
in package.json top level entry "type": "module"
in package.json dev dependencies @types/bootstrap
jest-config (in our case also in package.json):

"jest": {
    "testEnvironment": "jsdom",
    "transform": {
      "^.+\\.svelte$": [
        "svelte-jester",
        {
          "preprocess": true
        }
      ],
      "^.+\\.ts$": "ts-jest"
    },
    "moduleFileExtensions": [
      "js",
      "ts",
      "svelte"
    ],
    "moduleDirectories": [
      "src",
      "node_modules"
    ]
  }

in typescript config:

"compilerOptions": {
    "target": "ES2020",
    "outDir": "./public/build",
    "lib": ["ES2021", "DOM"]
  }

in custom component use Bootstrap imports like this:
import Alert from "bootstrap" // -> resolves to node_modules/@types/bootstrap/index.d.ts
for debugging: not having sourceMaps turned off in tsconfig.json (compilerOptions:{ sourceMap: true } or just leaving out the sourceMap entry like in our case)

Some settings that worked too, but we found them not so pretty:

Jest config:

      "ts-jest": {"useESM": true}
    },
    "transform": {
      "^.+\\.svelte$": [
        "./node_modules/svelte-jester/dist/transformer.mjs", { "preprocess": true}
      ],
    },
    "extensionsToTreatAsEsm": [ ".svelte", ".ts" ]

babel config, as recommended in svelte-preprocess (https://github.com/sveltejs/svelte-preprocess)

      [
        "@babel/preset-env",
        {
          "loose": true,
          "modules": false,
          "targets": {
            "esmodules": true
          }}]]

svelte.config.js in cjs module syntax

const sveltePreprocess = require("svelte-preprocess");
module.exports = { preprocess: sveltePreprocess() };

This did NOT work, our typescript config was messed up:

"target": "esnext",
    "outDir": "./public/build",
    "sourceMap": true,
    "allowJs": true,

    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "node",
      "jest"
    ]

Some other helpful resources around svelte component testing:

.

We hope, that helps someone 🙂

sebastianrothe · 2022-01-29T20:46:38Z

There seems to be some new options to jest transformers (https://github.com/facebook/jest/blob/main/docs/CodeTransformation.md#writing-custom-transformers) to control the runner, on which version to choose (CJS or ESM). Might be worth a try.

mihar-22 · 2022-02-01T10:16:05Z

Should be fixed now 😄 Let us know if you run into any issues.

sebastianrothe added the bug Something isn't working label Sep 15, 2021

ko-pp mentioned this issue Sep 23, 2021

TypeError [ERR_INVALID_ARG_TYPE] - Sapper #86

Closed

sebastianrothe mentioned this issue Sep 24, 2021

Compatibility with Yarn 2 (PnP) #36

Open

nika-d mentioned this issue Jan 25, 2022

[Bug]: Jest ESM (ts-jest) can't find import from CJS module jestjs/jest#12120

Closed

sebastianrothe mentioned this issue Jan 29, 2022

Fix for BUG 72 (OSX) - [ERR_INVALID_ARG_TYPE]: The "id" argument must… #93

Merged

mihar-22 closed this as completed Feb 1, 2022

sebastianrothe mentioned this issue Feb 13, 2022

Feature/esm as default transformer #101

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError [ERR_INVALID_ARG_TYPE] #72

TypeError [ERR_INVALID_ARG_TYPE] #72

YogliB commented Sep 9, 2021

sebastianrothe commented Sep 10, 2021

asode commented Sep 16, 2021

sebastianrothe commented Sep 19, 2021

sebastianrothe commented Sep 19, 2021 •

edited

Loading

sebastianrothe commented Sep 20, 2021 •

edited

Loading

mtempleheald commented Oct 30, 2021

akesson commented Nov 15, 2021

akesson commented Nov 15, 2021 •

edited

Loading

ghost commented Nov 25, 2021

gspetrou commented Nov 28, 2021 •

edited

Loading

gagbo commented Nov 30, 2021

rvisharma commented Dec 18, 2021

adyshev commented Jan 20, 2022 •

edited

Loading

nika-d commented Jan 25, 2022 •

edited

Loading

sebastianrothe commented Jan 29, 2022

mihar-22 commented Feb 1, 2022

TypeError [ERR_INVALID_ARG_TYPE] #72

TypeError [ERR_INVALID_ARG_TYPE] #72

Comments

YogliB commented Sep 9, 2021

sebastianrothe commented Sep 10, 2021

asode commented Sep 16, 2021

sebastianrothe commented Sep 19, 2021

sebastianrothe commented Sep 19, 2021 • edited Loading

sebastianrothe commented Sep 20, 2021 • edited Loading

mtempleheald commented Oct 30, 2021

akesson commented Nov 15, 2021

akesson commented Nov 15, 2021 • edited Loading

ghost commented Nov 25, 2021

gspetrou commented Nov 28, 2021 • edited Loading

gagbo commented Nov 30, 2021

rvisharma commented Dec 18, 2021

adyshev commented Jan 20, 2022 • edited Loading

nika-d commented Jan 25, 2022 • edited Loading

Our stack:

Main points of the solution:

Some settings that worked too, but we found them not so pretty:

This did NOT work, our typescript config was messed up:

Some other helpful resources around svelte component testing:

sebastianrothe commented Jan 29, 2022

mihar-22 commented Feb 1, 2022

sebastianrothe commented Sep 19, 2021 •

edited

Loading

sebastianrothe commented Sep 20, 2021 •

edited

Loading

akesson commented Nov 15, 2021 •

edited

Loading

gspetrou commented Nov 28, 2021 •

edited

Loading

adyshev commented Jan 20, 2022 •

edited

Loading

nika-d commented Jan 25, 2022 •

edited

Loading