TypeError: SomeClass_vue_1.default is not a constructor in Jest test

345 views Asked by At

I need to test Line class. But I see only this error TypeError: Line_vue_1.default is not a constructor in Jest test. If I test class that extends only Vue - it works fine. But if it extends myCustomClass it throw an error. I checked I use correct import/export. If I do

console.log(typeof Line) // i got object

my vue.config.js

const { defineConfig } = require("@vue/cli-service");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

module.exports = defineConfig({
  outputDir: path.resolve(__dirname, "wwwroot"),
  assetsDir: "structures/documents/",
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.resolve.symlinks(false);
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        // modify the options...
        return options;
      });
    config.entry("app").clear().add("./ClientApp/main.ts").end();
    config.resolve.alias
      .set("@", path.join(__dirname, "ClientApp/"))
      .set("vue", path.resolve(__dirname, "./node_modules/vue"));
    config.plugin("copy").use(CopyWebpackPlugin, [
      {
        patterns: [
          {
            from: path.resolve(__dirname, "ClientApp/assets/icons/favicon.ico"),
            to: path.resolve(__dirname, "wwwroot/structures/documents/favicon.ico"),
          },
        ],
      },
    ]);
  },
});

my ts config

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "allowJs": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env", 
      "jest"
    ],
    "paths": {
      "@/*": ["ClientApp/*"]
    },
    "lib": [
      "esnext", 
      "dom", 
      "dom.iterable", 
      "scripthost"
    ]
  },
  "include": [
    "ClientApp/**/*.ts",
    "ClientApp/**/*.tsx",
    "ClientApp/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "tests/unit/testData/mockHtml.ts"
  ],
  "exclude": ["node_modules"]
}

my jest config

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { compilerOptions } = require("./tsconfig");
import { pathsToModuleNameMapper } from "ts-jest";

module.exports = {
  collectCoverage: true,
  coverageReporters: ["json", "html"],
  preset: "ts-jest",
  setupFiles: ["./tests/jest.init.ts"],
  testEnvironment: "jest-environment-jsdom",
  testEnvironmentOptions: {
    customExportConditions: ["node", "node-addons"],
  },
  modulePaths: ["<rootDir>"],
  moduleDirectories: ["node_modules", __dirname],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
  moduleFileExtensions: ["js", "vue", "ts"],
  transform: {
    ".*\\.(vue)$": "<rootDir>/node_modules/@vue/vue3-jest",
    "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest",
    "^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest",
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
  },
  transformIgnorePatterns: [
    "node_modules/(?!variables/.*)",
    "<rootDir>/node_modules/button-plugin-vue",
  ],
};

I have some class extends other class that extends Vue

export default class Line extends LineBase{}
export default class LineBase extends Vue{}

in Jest test i try to test Line class

const instance = new Line();

but jest throw error

TypeError: Line_vue_1.default is not a constructor
0

There are 0 answers