The mysterious case of TypeScript imports making all other code vanish

I have multiple classes located in

root/app/providers/engine/engine.ts
. In my test specification file spec/engine/engine-spec.ts (the spec/ directory is also where the jasmine support/ resides), I have a simple test:

///<reference path="../../typings/globals/jasmine/index.d.ts"/>
// The typings reference does exist

import {ClassA, ClassB, ClassC, ClassD, ClassE, EnumThing} from '../../app/providers/engine/engine';

describe('In the classes,', () => {
    describe('ClassA', () => {
        it('exists', () => {
            expect(new ClassA()).toBeDefined();
        });
    });
});

In my gulpfile, I've configured the test task to compile this code using tsc and then run jasmine. However, when executing the above example, Jasmine cannot find any specifications and terminates. The output file generated by tsc looks like this:

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
///<reference path="../../../typings/globals/lodash/index.d.ts"/>
///<reference path="../../../typings/globals/chance/index.d.ts"/>
// }}}
///<reference path="../../typings/globals/jasmine/index.d.ts"/>

As shown, this section simply represents TypeScript's implementation of class extends, leading to all specs disappearing!

If I remove the import statement and run a basic expect(true).toBe(true) test, everything works fine - Jasmine identifies one spec and passes successfully. The resulting output.spec.js appears as expected:

///<reference path="../../typings/globals/jasmine/index.d.ts"/>
describe('In the classes,', function () {
    describe('ClassA', function () {
        it('exists', function () {
            expect(true).toBe(true);
        });
    });
});

Despite these observations, I'll share the gulp test task here in case it may be causing the issue:

// At the top
var gulp = require('gulp');
var tsc = require('gulp-typescript');
var spawn = require('child_process').spawnSync;

// Few unrelated tasks later ...

gulp.task('test', function(done) {
    var stream = gulp.src('spec/**/*.spec.ts')
        .pipe(tsc({
            out: 'output.spec.js',
            target: 'es5'
        }))
        .pipe(gulp.dest('spec/'));

    stream.on('end', function() {
        spawn('jasmine', ['--color', 'spec/output.spec.js'], {
            stdio: 'inherit'
        })
        done();
    });
});

The problem seems to lie with tsc itself, but I'm unsure how to resolve it.

Thank you in advance!

Answer №1

It appears that in this specific scenario, imports are not functioning as expected. Instead, using a ///<reference path="..."/> comment (where the placeholder ... is replaced with the actual path) seems to be effective.

This behavior is quite peculiar. While I have found a solution that works, I would greatly appreciate it if someone could provide further insight or clarification on why this workaround is necessary.

Thank you!

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

There is no index signature that includes a parameter of type 'string' in the specified type

I have a background in mobile app development and am looking to learn more about TypeScript. How can I declare a map object with the form [string:any]? The error is occurring at line: map[key] = value; Element implicitly has an 'any' type becaus ...

Is it time to launch your React TypeScript application on AWS S3?

I need help transitioning my deployment from AWS S3 using JavaScript to TypeScript. What specific code should I incorporate in TypeScript to facilitate this transition? 1) I have downloaded files with a .ts extension. https://i.sstatic.net/He49G.jpg 2) H ...

Unable to load the default value for ion-select in TypeScript

I have reviewed this question, this question, and this question. However, none of them seem to provide a straightforward solution for what I am searching for. <ion-list> <ion-item> <ion-label>Select Book</ion-label> <i ...

Enhance your coding experience with Angular Apollo Codegen providing intelligent suggestions for anonymous objects

Currently, I am exploring the integration of GraphQL with Angular. So far, I have been able to scaffold the schema successfully using the @graphql-codegen package. The services generated are functional in querying the database. However, I've noticed ...

Tips for refining search criteria with a combination of checkbox and range slider in Angular 2

In an attempt to refine the results for the array "db," I have implemented three filters: price, duration, and category. I have experimented with using the filter() method to apply these filters. You can find the code I have worked on here: https://stack ...

Encountering difficulties with installing bootstrap-vue

While attempting to integrate Bootstrap-Vue into my project that includes Vuex, Vue-Router, TypeScript, and Babel, I encounter an error in the browser. To replicate docker run -it --rm -p 8080:8080 node:17.7.2-alpine yarn global add @vue/cli vue create ...

Implementing TypeScript for augmented styling properties in a component - a guide

I have custom components defined as follows: import React from 'react'; import styled from '../../styled-components'; const StyledInput = styled.input` display: block; padding: 5px 10px; width: 50%; border: none; b ...

Styling with CSS in Angular 2+ can be quite challenging

Hey there, I'm new to Angular 4 and running into some troubles with styling my application. I tried adding a background image to the body, which worked fine, and then added a component to display content, also looking good. Now, when I added a second ...

What is the best way to mock imports in NestJS testing?

I am interested in writing a unit test for my nestjs 'Course' repository service, which has dependencies on Mongoose Model and Redis. courses.repository.ts: import { Injectable, HttpException, NotFoundException } from "@nestjs/common"; ...

Conditional generic type in return type with Typescript

How can I condition the generic return type when a value is not present? type Foo = {}; class Bar<P extends Foo> { static make<P extends Foo>(a?: P): Bar<P> { return new Bar(); } } Bar.make() // returns Bar<Foo> ...

Implementing a PhysicsImpostor feature that flips meshes upside-down

After exporting a mesh from Blender and loading it from a GLB file, I encountered an issue with the PhysicsImpostor causing the entire model to flip upside down. Can anyone help me troubleshoot this problem? export class Player extends BABYLON.AbstractMes ...

How can a border be applied to a table created with React components?

I have been utilizing the following react component from https://www.npmjs.com/package/react-sticky-table Is there a method to incorporate a border around this component? const Row = require("react-sticky-table").Row; <Row style={{ border: 3, borderco ...

Struggling to implement a singleton service in Angular as per the documentation provided

I have implemented a service in Angular that I want to be a singleton. Following the guidelines provided in the official documentation, I have set the providedIn property to "root" as shown below: @Injectable({ providedIn: "root" }) export class SecuritySe ...

The NUXT project encounters issues when trying to compile

I am currently working on an admin panel using the nuxt + nest stack. I am utilizing a template provided at this link: https://github.com/stephsalou/nuxt-nest-template While in development mode, the project starts up without any issues. However, when I ...

What makes this lambda function in TypeScript successfully execute without any errors?

I was under the impression that this code let x: (a: { b: number }) => void = (a: { b: number, c: string }) => { alert(a.c) }; x({ b: 123 }); would result in an error because the lambda function requires an additional property on the a argument, m ...

What is the reasoning behind TypeScript's decision to permit implicit downcasting in method parameters?

Consider the following example: interface Vehicle{ mass:number } interface InspectorClass{ inspect(v:Vehicle):void } class Car implements Vehicle{ mass = 2000 wheels = 4 } class Boat implements Vehicle{ mass = 3000 sails = 2 } ...

Module logo.svg not found? Error in Typescript

Integrating package: vue-svg-loader. Established the file svg.d.ts with the content below: declare module '*.svg' { const content: any export default content } Utilizing it in a component in the following manner: import register from &apo ...

Extending a Svelte component with a P5JS class: A step-by-step guide

As a newcomer to SO, I haven't asked many questions before, so please bear with me if I don't entirely follow the guidelines. I'll do my best to explain the issue at hand. In my project, I am utilizing Sveltekit (create-svelte) and P5JS (p5 ...

Using TypeScript absolute imports from another project for standard TypeScript files and declarations at a global scope

We are currently considering migrating a large JavaEE code base to TypeScript. Within this environment, there are multiple projects with intricate directory structures and JavaScript code that heavily relies on global variables across all projects. Althou ...

Ways to simulate a function that is a part of an internal object

Is there a way to mock a method from an object within my UnderTest class? When the Update method is triggered by an event from a child component, I need to mock the service.saveNewElement(data) method in order to test data in the then() block. <script ...