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