Executing TypeScript code with Mocha in a web browser

I have successfully managed to execute Mocha tests in the browser using ES6 / Typescript with the following code:

// test.ts

import 'mocha/mocha.css';
import * as M from 'mocha/mocha-es2018';
import { expect } from 'chai';

M.setup('bdd');

// import more tests here

describe('test', () => {
  it('test1', () => {
    expect(true).to.true;
  })
});

M.run();

After building the project (using vite), the html page loads properly. However, I want to include additional tests like this:

import './unit/sum.spec.ts';
// more imports

Unfortunately, adding these imports leads to the following error:

Uncaught ReferenceError: describe is not defined

Is there a way to make all Mocha functions globally accessible in an ES6 environment?

Answer №1

After some tinkering, I managed to achieve the following:

import 'mocha/mocha.css';
import * as M from 'mocha/mocha-es2018';

(async () => {

  M.setup('bdd');

  await Promise.all([
    import('./unit/add.spec'),
    import('./unit/sub.spec'),
    import('./component/calc.spec')
  ]);

  
  M.run();

})();

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

The absence of a type annotation for `T` has been noted

Attempting to create code with a simple JavaScript function: filterArray(user: any, items: Array<Object>) { items = items.filter(item => {return true;}); return items; } Encountering the following error: Error message: Missing type anno ...

How come when I select a date with HTML5, the date displayed in Javascript doesn't match the date selected in the date picker?

Check out this plunker: http://plnkr.co/edit/c7N78xvGa4WYDehVZjD6?p=preview <body ng-app="dateInputExample"> <script> angular.module('dateInputExample', []) .controller('DateController', ['$scope', funct ...

Encountering an error in Express while attempting to upload an image due to the inability to read the property 'file' of undefined

I am currently learning Express framework. I encountered an error while trying to upload an image using Express. The error message I received is "Cannot read property 'file' of undefined." Below are the code snippets that I am using, and I&apo ...

Tips for modifying the UserRepresentation in keycloak REST API response

Whenever we send a GET request to the following URL: https://my-keycloak/admin/realms/test-realm/users We receive a comprehensive list of users who are associated with the test-realm. According to the Keycloak REST API documentation, this kind of respons ...

Cannot assign Angular 4 RequestOptions object to post method parameter

I'm having trouble with these codes. Initially, I created a header using the code block below: headers.append("Authorization", btoa(username + ":" + password)); var requestOptions = new RequestOptions({ headers: headers }); However, when I tried to ...

What is the method for dynamically altering attributes using a directive?

I am currently working on dynamically assigning attributes to HTML tags (such as Select, Button, or Input) within a switch statement. However, I'm a bit stuck and would appreciate any better ideas or suggestions you may have. My goal is to identify w ...

I am interested in displaying the PDF ajax response within a unique modal window

With the use of ajax, I am able to retrieve PDF base64 data as a response. In this particular scenario, instead of displaying the PDF in a new window, is it possible to display it within a modal popup? Any suggestions on how this can be achieved? $.ajax ...

Is it necessary for Vue-EventBus to have its own dedicated function in order to work effectively?

Encountered a bug while transferring data using eventbus. What I attempted to do was pass the data from 'Quoteinput.vue' to 'Quotebar.vue' in order to update the progress bar length based on the data length present in 'Quoteinput.v ...

Animation is frequently interrupted by hidden overflow

My query may be a bit complex, but I will do my best to explain. I have created an animation on my webpage where there is a <div> with the property of overflow: hidden. The animation pauses at this point for a few seconds before resuming. Any suggest ...

Employing jQuery to extract the text from the h4 class="ng-binding" element beyond the Angular scope

Is it possible to retrieve the current text content of <h4 class="ng-binding"></h4>? The text content is generated dynamically within the angular.js setup. I am interested in finding a way to extract this text using jQuery or JavaScript from ...

What could be causing my resize event to not trigger?

My goal is for the #sequence div to be full height of the browser window when the window size is greater than 920px in height. In such cases, I also want to trigger a plugin. If the window size is lower than 920px, then the height of the #sequence div shou ...

"Troubleshooting ways to resolve babel-eslint import/export issues without the need for a configuration

Upon running npm start, I encountered the following error message: Parsing error: 'import' and 'export' may only appear at the top level After investigating this issue, suggestions included updating the eslint configuration file with ...

Issues with ReactJS routing functionality

Apologies if this question has been asked before. I am facing an issue that I can't seem to resolve or find a solution for. My React Router setup includes an IndexRoute that works fine (localhost:8080/ or localhost:8080 renders). The templates are nes ...

What methods can be used to differentiate between value equality and reference equality when watching something?

In the world of AngularJS, the $watch function comes with an interesting twist - it has an optional third parameter. By default, this parameter is set to false, which means the watch will only trigger if the watched reference changes. But if you set it to ...

The stored information causes the material ui text fields to malfunction

Having trouble with my text fields in a React and Material UI application. When autofill data is saved, the styling breaks. The component code is included below. I've searched online but couldn't find any helpful solutions. import React, { useSta ...

Problem with ng-repeat not updating select dropdown options

Struggling with AngularJS while working on a project, I encountered an issue with a 'select-options' element. Currently, I am making a $http request to retrieve data from a Cloud SQL database. To achieve this, I am invoking a function from my f ...

Is there a universal method to transform the four array values into an array of objects using JavaScript?

Looking to insert data from four array values into an array of objects in JavaScript? // Necessary input columnHeaders=['deviceName','Expected','Actual','Lost'] machine=['machine 1','machine 2&apo ...

Defining Multiple Types in Typescript

I have created an interface in a TypeScript definition file named d.ts: declare module myModule { interface IQedModel { field: string | string[]; operator: string; } } In an Angular controller, I have utilized this interface like ...

Optimal method for storing large arrays of numbers in localStorage using JavaScript

*"Efficient" in this context refers to smaller size (to reduce IO waiting time) and fast retrieval/deserialization times. Storing times are less important in this scenario. I need to store multiple arrays of integers in the browser's localStorage, ea ...

Updating the AngularJS view following a deletion process

I have a web application developed using AngularJS and Rails that carries out RESTful operations like create, read, and delete. After deleting an item, I need to refresh the page and update the view asynchronously. However, I am facing challenges in imple ...