svelte-jester: Unable to get Typescript working with many ES modules

I have a typescript Svelte component that makes use of moment.JS, importing like so:

import moment from "moment

It works with my rollup compilation and development server flawlessly. However, when using svelte-jester and using preprocessing, it says that ‘moment is not a function’.

Here is my jest configuration:

module.exports = {
    testEnvironment: "jsdom",
    transform: {
        "^.+\\.svelte$": [
            "svelte-jester",
            {
                preprocess: true
            }
        ],
        "^.+\\.js$": "babel-jest",
        "^.+\\.ts$": "ts-jest"
    },
    moduleFileExtensions: ["js", "ts", "svelte"],
    setupFilesAfterEnv: ["./jestSetup.ts"],
    transformIgnorePatterns: ["node_modules/(?!(svelte-typewriter|svelte-flatpickr)/)"],
    moduleNameMapper: {
        "\\.(css|less|scss)$": "identity-obj-proxy"
    },
    testPathIgnorePatterns: ["/lib/", "/node_modules/"]
}

jestSetup.ts:

import "@testing-library/jest-dom";

tsconfig.json (have tried many variants):

{
    "extends": "@tsconfig/svelte/tsconfig.json",
    "include": ["src/**/*", "src/types/*"],
    "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
    "compilerOptions": {
        "types": ["jest", "node"],
        "allowSyntheticDefaultImports": true,
        "target": "ES2019"
    }
}

test output:


    TypeError: moment is not a function

      35 |                 dv[0] = flatpickr.formatDate(dv[0], "Y-m-d")
      36 |             }
    > 37 |             if (
         |             ^
      38 |                 typeof dv[1] != "string" &&
      39 |                 String(new Date(dv[1])) !== "Invalid Date"
      40 |             ) {

      at updateDate (src/components/Options.svelte:37:13)
      at Object.$$self.$$.update (src/components/Options.svelte:26:4)
      at init (node_modules/svelte/internal/index.js:1450:8)
      at new Options (src/components/Options.svelte:1815:3)
      at Array.create_default_slot_5 (src/App.svelte:25:12)
      at create_slot (node_modules/svelte/internal/index.js:65:29)
      at create_fragment (src/components/Sidebar.svelte:19:23)
      at init (node_modules/svelte/internal/index.js:1454:37)
      at new Sidebar (src/components/Sidebar.svelte:122:3)
      at create_fragment (src/App.svelte:377:12)
      at init (node_modules/svelte/internal/index.js:1454:37)
      at new App (src/App.svelte:510:3)
      at Object.render (node_modules/@testing-library/svelte/dist/pure.js:71:21)
      at Object.<anonymous> (tests/integration/Home.spec.ts:5:40)

This isn’t the first time I have had trouble with transpiling. There have been issues with getting other Svelte components to work, problems with flatpickr, etc.

Please let me know if there is something I am doing wrong.

About this issue

Original URL
State: open
Created 4 years ago
Comments: 31

Most upvoted comments

A nasty workaround for clsx:

In your package.json:

  "jest": {
    ...
    "moduleNameMapper": {
      "^clsx$": [
        "<rootDir>/src/clsx.jest.js"
      ]
    }
  }

Create a new file /src/clsx.jest.js

const clsx = require('clsx/dist/clsx.js')
module.exports.default = clsx

wgrabias on Jul 25, 2021

A nasty workaround for clsx:

In your package.json:

  "jest": {
    ...
    "moduleNameMapper": {
      "^clsx$": [
        "<rootDir>/src/clsx.jest.js"
      ]
    }
  }

Create a new file /src/clsx.jest.js

const clsx = require('clsx/dist/clsx.js')
module.exports.default = clsx

That’s the only solution which works for me. I use it for my troubles with Flatpickr: In your package.json:

  moduleNameMapper: {
    "^flatpickr$": ["<rootDir>/src/flatpickr.jest.js"]
    }

and then you make a new file ‘’/src/flatpickr.jest.js:

const flatpickr = require('flatpickr/dist/flatpickr.js')
module.exports.default = flatpickr

Thank you @wgrabias

simeonTsonev on Jan 18, 2022

That hack I linked earlier might do the trick then if moment and dayjs are tricky:

import * as dayjs from "dayjs";
const dayjs = require("dayjs").default || require("dayjs");

mihar-22 on Aug 29, 2020

That really sucks @therealpaulgg, so we don’t go back and forth too much, when I have some time today I’ll set up a project just like yours, and I’ll see if I can get it working.

mihar-22 on Aug 27, 2020