Issue with semicolon" error encountered while jest mocking a class with Typescript

I've encountered an issue while working with Typescript and Jest in my code testing. I tried to do a type casting on a class for mocking purposes, but it resulted in an error during the test suite run:

 SyntaxError: C:\Projects\sim_editor\server\src\tests\routes.test.ts: Missing semicolon (7:37)

Below is the snippet of the code causing the problem:

describe('Unit test api routes', () => {
    jest.mock('../controllers')
    const mkControllers = Controllers as jest.MockedClass<typeof Controllers>

    beforeEach(() => {
        mkControllers.mockClear()
    })

    .
    .
    .
    The remaining tests go here
 })

The error message specifically mentions the "mkControllers" line.

A more detailed log of the error is shown below:

at Parser._raise (node_modules/@babel/parser/src/parser/error.js:97:45)
  at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:92:17)
  at Parser.raise (node_modules/@babel/parser/src/parser/error.js:41:17)
  at Parser.semicolon (node_modules/@babel/parser/src/parser/util.js:131:10)
  at Parser.parseVarStatement (node_modules/@babel/parser/src/parser/statement.js:707:10)
  at Parser.parseStatementContent (node_modules/@babel/parser/src/parser/statement.js:223:21)
  at Parser.parseStatement (node_modules/@babel/parser/src/parser/statement.js:163:17)
  at Parser.parseBlockOrModuleBlockBody (node_modules/@babel/parser/src/parser/statement.js:880:25)
  at Parser.parseBlockBody (node_modules/@babel/parser/src/parser/statement.js:856:10)
  at Parser.parseBlock (node_modules/@babel/parser/src/parser/statement.js:826:10)

Your help will be greatly appreciated!

Answer №1

It seems like I forgot to set up Babel correctly for Typescript compatibility, which is necessary for Jest to function properly. Be sure to check out the guidelines here, specifically under "Using Babel" and "Using Typescript"

Answer №2

To enable TypeScript in Jest, utilize Babel for the setup process as described below.


Step 1: Integrate the necessary dependencies by executing this command in your terminal.

npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-typescript

Step 2: Establish a new file called babel.config.js at the project's root directory.

Step 3: Insert the provided code snippet into the babel.config.js file.

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

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

Angular TS2564 Error: Attempting to access an uninitialized property 'formGroup'

userForm: FormGroup; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.setupForm(); } setupForm() { this.userForm = this.formBuilder.group({ 'username': ['', Validators.required], 'pa ...

The axios requests are sent to the backend API, but the webpage remains empty without

I am trying to retrieve a base64 encoded image from my local backend by making a local API call. The logging on the backend confirms that axios is successfully calling the API, however, the frontend displays an empty page with no data. What could be caus ...

Zoomsounds: Injecting fresh content into div using data-source attribute

Currently, I am utilizing a javascript audio player called ZoomSounds. It generates circular play button divs and injects content into them using the following code: <div id="ap3" class="audioplayer-tobe skin-minimal" style="po ...

Struggling to validate jest snapshot matching

I've been struggling with this issue for a few days now. I can't seem to get the '.toMatchSnapshot' test to pass, and it's clear that I'm missing something in my understanding of how it works. Should I be making changes to my ...

There seems to be an issue with JavaScript functionality when implementing Bootstrap 5.3

Struggling with building a website on Visual Studio Code using Bootstrap 5.3. The functions like buttons not expanding and carousel not rolling are not working. Being a beginner, I'm finding it hard to understand why :( Has anyone encountered this is ...

How to retrieve MySQL datetime values in PHP?

Currently, I am working on a countdown timer using PHP and JavaScript. The main issue I am facing is trying to retrieve the datetime ($end_date) from MySQL and inserting it into the $date ='' within my code. The code functions correctly when I m ...

The issue with mongodb .deny() function in Meteor: Troubleshooting the problem

Here is the code snippet: Cashier.deny({ insert() { return true; }, update() { return true; }, remove() { return true; }, }); It seems that this code is not functioning as expected. I have attempted to update data from the client using Mongol, but ...

Execute jquery commands after the function has finished

I am trying to implement the code below: $(":file").change(function () { if (this.files && this.files[0]) { console.log(this.files[0]); var reader = new FileReader(); ...

What is the best way to implement Axios for data fetching in Gatsby's useStaticQuery function?

One way to fetch data in Gatsby is by using GraphQL, like in the following example: import { graphql, useStaticQuery } from "gatsby" const IndexPage = () => { const gatsbyRepoData = useStaticQuery(graphql` { github { repo ...

Converting JSON into TypeScript class or interface?

Currently, I am in the process of building a web application using Angular2 and Typescript. The JSON structure I have is as follows: { "homeMenu":{ "aname1":{ "title":"text", "route":"myroute" }, "aname2":{ "title":"tex ...

MongoDB: Group Documents by Calendar Week and Year, then Sum the Values of a single field

{ "GU" : "Person2", "CW" : 2, "Year" : 2015, "_id" : "01" }, { "GU" : "Person2", "CW" : 2, "Year" : 2015, "_id" : "02" }, { "GU" : "Person1", "CW" : 2, "Year" : 2015, "_id" : "03" }, { "GU" : "Person1", ...

The issue of elements flickering while being hidden and shown with jQuery has been observed in both Chrome and

Having trouble with a simple animation using jQuery? While it may work smoothly in Firefox, you might be experiencing flickering in Chrome and Edge. Check out this jsfiddle for reference: HTML <div id="boxes-wrapper"> <div class="box"></ ...

How to Move an Element Using HTML and jQuery: Removing with detach() and Reinsert

In my current website setup, I have implemented a feature where clicking on a div triggers the appearance of a sub menu below the clicked div. Now, I am attempting to detach() this sub menu, insert it after the div that was clicked, and adjust its position ...

When utilizing useRef and useCallback in React, the output is visible in the console log but does not appear on the page

When working with API data, it's important to remember that the extraction process is asynchronous and the state may not be available at certain times. To handle this situation, we can utilize useCallback. However, even after successfully logging the ...

Employ variables as a jQuery selector

let myLink = "#portfolio-link-" + data[i].pf_id; I am storing an ID in a variable. $("#pf-container-1").append(portfolio); console.log(myLink); $(myLink).append(function(){ $("<button class='btn btn-inverse' id='portfo ...

Nothing happens when the render_template method receives AJAX content in Flask with Python and JavaScript

When a certain condition is met, I am using ajax to pass data to my python function: if (lesson.length === 0) { $.ajax( { type:'POST', contentType:'application/json& ...

Creating regex to detect the presence of Donorbox EmbedForm in a web page

I am working on creating a Regex rule to validate if a value matches a Donorbox Embed Form. This validation is important to confirm that the user input codes are indeed from Donorbox. Here is an example of a Donorbox EmbedForm: <script src="https: ...

Is it possible to dynamically load a specific div when the page loads, relying on the

I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...

Steps to transform an HTML form template into an HTML string

Below is an example of an object I am working with: $scope.item ={ fieldName:'First Name', fieldModel:'user.firstname', placeholder:'enter your name' } I intend to create an html form template as ...

I've come across this ajax url that seems promising, but I keep getting a GET 404 (Not Found)

I am attempting to validate using ajax and php. This is the code I have for my ajax: function PrintRecibopapel() { recibo = document.getElementById("txtCod").value; if(recibo == "") { alert("You must save the receipt before pr ...