TypeError [ERR_INVALID_ARG_TYPE] about svelte-jester HOT 16 CLOSED

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

from svelte-jester.

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

from svelte-jester.

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

• https://2ality.com/2019/10/hybrid-npm-packages.html#option-3%3A-bare-import-esm%2C-deep-import-commonjs-with-backward-compatibility
• https://nodejs.org/api/packages.html#packages_subpath_folder_mappings
• https://nodejs.org/api/packages.html#packages_conditional_exports

from svelte-jester.

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;

from svelte-jester.

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.

from svelte-jester.

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?

from svelte-jester.

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

from svelte-jester.

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

from svelte-jester.

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.

from svelte-jester.

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

@mtempleheald could you please share your working config?

from svelte-jester.

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

from svelte-jester.

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

from svelte-jester.

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)

from svelte-jester.

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:

• https://dev.to/d_ir/setting-up-a-svelte-test-environment-2f3e
• https://timdeschryver.dev/blog/how-to-test-svelte-components#writing-a-test

.

We hope, that helps someone 🙂

from svelte-jester.

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.

from svelte-jester.

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

from svelte-jester.