Tips for importing a module from a typescript file into a Jest test file

My current setup involves using jest for testing my typescript codes. 

import ClassA from '../classA';
jest.mock('../classA');

However, when I try to import a class from my classA.ts file, an error is thrown by jest:

export default ClassA;
^^^^^^
SyntaxError: Unexpected token export

This issue arises despite having the following jest configuration in my package.json:

"devDependencies": {
  "@types/jest": "^19.2.3",
  "jest": "^20.0.4",
  "ts-jest": "^20.0.4",
  "ts-node": "^3.0.2",
  "typescript": "^2.3.2"
},
"jest": {
  "transform": {
    ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  },
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "json"
  ]
}
typescriptjestjs

Answer №1

{
    "compilerOptions": {
        "types": ["vue-typescript-import-dts"],
}
}
import Component = require('./component.vue')
import * as Component from './component.vue'
npm install vue-typescript-import-dts --save-dev

Answer №2

After trying ts-jest and finding it unsatisfactory, I decided to manually copy and paste the code from this source into a file in my project: fb ts jest. However, I did need to make a slight modification to enable es6 modules to function correctly in my jest tests.

The necessary addition is:

|| path.endsWith('.js')

to be included in the existing if statement.

Answer №3

To address the issue, it is advisable to enable the allowSyntheticDefaultImports setting in the tsconfig.json file.

Answer №4

import { ClassA } from '../classA';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to showcasing JSON Array in an HTML table with the help of *NgFor

Struggling to showcase the data stored in an array from an external JSON file on an HTML table. Able to view the data through console logs, but unable to display it visually. Still navigating my way through Angular 7 and might be overlooking something cruc ...

arraysangulartypescriptangular7ngfor

Incorporating HTTP status codes into error handling

I have developed an API where I've organized the services separately from the controllers. In my service functions, I've included basic checks to trigger errors when certain conditions are met. Currently, my controller function just returns a 500 ...

node.jstypescriptexpresserror-handling

Accessing User Session with NextAuth in Application Router API Route

Utilizing NextAuth in conjunction with Next.js's App Router, I have established an API route within my /app/api directory. Despite my efforts, I am encountering difficulties retrieving the session associated with the incoming request. Below is the sn ...

typescriptnext.jsnext.js13next-authapp-router

Formik: Customizing form rendering based on sibling form values

<ParentComponent> ... <Formik initialValues={getInitialValues(data)} enableReinitialize={true} validationSchema={schema} isInitialValid={!isNew} onSubmit={() => {}} render={formikProps => ( <SimulatorForm&g ...

reactjstypescriptformik

Adjust the selection of 'select' within the Angular change event handler

Can the selection of an HTML <select> be changed within its own change event handler? The code I have functions perfectly. It removes the selected item from the drop-down, adds it to another array, and resets the selection of the <select> to t ...

angulartypescripthtml-select

Encountering an issue with importing a component in a mixin in NuxtJS

Currently, my main technologies are Nuxtjs and Nuxt-property-decorator To prevent repeating a certain method, I created a mixin This method requires the use of a component (Alert component) In order to use the component in the mixin, I imported it Howe ...

typescriptvue.jsnuxt.jsvue-property-decorator

Error occurred: Unable to locate module: Error: Unable to resolve './templates'

Currently, I am working on a TypeScript file named index.ts which includes some JavaScript code. The main functionality involves importing Bootstrap CSS and templates. import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import ' ...

javascripttypescriptwebpack

What are the best practices for utilizing fetch() to retrieve data from a web API effectively?

Is there a way to store stock data in stockData and display it in the console upon form submission? Upon submitting the form, I only receive undefined. I suspect this may be due to a delay in fetching data from the API (but not certain). How can I resol ...

reactjstypescriptnext.jsasync-awaitfetch

Is it possible for a type to include itself within Typescript?

After reading about Typescript, I learned that the 'declare' keyword is similar to the 'extern' keyword in C. It declares a variable that is defined elsewhere, possibly in the browser: declare var Request: { prototype: Request; ...

typescript

Encountering an undefined property error while using Reactjs

I made an attempt to retrieve data using an ajax request, but I am uncertain about the correctness of my code. Here is the code snippet: interface IProps { data: IScheduler; } interface IState { list: IScheduler; } export default class Page extends ...

ajaxreactjstypescriptundefinedaxios

What could be causing my Page to not update when the Context changes?

In my Base Context, I store essential information like the current logged-in user. I have a User Page that should display this information but fails to re-render when the Context changes. Initially, the Context is empty (isLoaded = false). Once the init fu ...

reactjstypescriptnext.js

The exported instance of sequelize is missing in the Module imports

Good evening! I currently have an express server with a main script that includes the following export: export const sequelize = new Sequelize( 'postgres', config.db_user, config.db_password, { host: 'localhost', port: config ...

node.jstypescriptexpressimportsequelize.js

Employing Bazel in conjunction with Lerna and Yarn workspaces

It seems that a lot of people are currently utilizing lerna and/or yarn workspace. I'm thinking about either transitioning from them to Bazel, or perhaps integrating them with Bazel in conjunction with an example project for guidance. Take for insta ...

node.jstypescriptbazellernabazel-rules

Converting a JSON object into a different format using TypeScript

Looking for advice on how to efficiently convert JSON data into a specific format without hardcoding any values like "root" or "Amount". I want to create a reusable function that can be used in various scenarios. Currently, I am working with TypeScript and ...

javascriptjsontypescript

Typescript struggles to comprehend the nullish-coalescing operator

Within my Vue + TypeScript application, I've incorporated an external package called @moj/pagination-layout. This package utilizes the nullish operator internally. However, when attempting to run the build process, it encounters a failure and presents ...

javascripttypescriptvue.jsbuild

What is the process for integrating Vue plugins into Vue TypeScript's template?

Seeking guidance on integrating Vue plugins into Vue TypeScript's template, for example with vue-webpack-typescript. Specifically interested in incorporating vue-meta. Included the following code in ./src/main.ts: import * as Meta from 'vue-me ...

typescriptvue.jsvue-componentvue-meta

Tips for triggering useEffect just once when various dependencies are updated simultaneously

Currently, I have implemented a useEffect hook with two dependencies in the following way: useEffect(() => { ..... }, [apiData, currentMeasurements]); It's important to note that the apiData is fetched using useLazyQuery from apollo/client. Upon ...

javascriptreactjstypescriptreact-hooks

Looking for a way to detect changes in a select menu using Angular?

How can I determine with the openedChange event if there have been any changes to the select box items when the mat select panel is closed or opened? Currently, I am only able to detect if the panel is open or closed. I would like to be able to detect any ...

javascriptangulartypescriptangular-material

Sending an array from an Angular component to a .Net Framework ApiController using HttpPost: A quick guide

I am attempting to send an Angular array data to the .Net Framework server side Here is my current code snippet: Angular: see below for code service.ts addRecipient(val:any) { return this.http.post(this.APIUrl+'/recipient',val); ...

asp.net.netangulartypescriptweb-services

Struggling to set up a Jest testing module for a NestJs service. Encountering an issue where Nest is unable to resolve dependencies of the UsersService, specifically the Config

Greetings, fellow developers! I am excited to ask my first set of questions on stackoverflow :) Currently, I am working on a test/learning application to enhance my skills in NestJS and Vue. During the implementation of server-side unit tests using Jest, ...

node.jstypescriptjestjsnestjs