Utilizing absolute import paths in Testcafe with Typescript causes the compiler to malfunction

When using absolute import paths in my test files, Intellij resolves correctly but the Testcafe compiler throws an error. Interestingly, no errors are thrown when using absolute paths within the application source files.

I'm wondering what could be causing this issue?

Here are the versions I am using:

"typescript": "~3.9.10",
"testcafe": "^1.16.0",
"@angular/core": "~10.2.5"

This is how my project structure looks like:

angular
├── e2e/
│   ├── tsconfig.json
│   └── src
│       ├── noResults.ts
│       └── test.e2e-spec.ts
├── node_modules/
├── src/
│   └── <project files>
├── tsconfig.json
├── testcaferc.json

Here is my tsconfig configuration:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2020",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "es2015", "dom"],
    "noImplicitAny": true,
    "strictNullChecks": true,
    "charset": "utf8",
    "newLine": "lf",
    "allowSyntheticDefaultImports": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "preserveWhitespaces": true,
    "strictTemplates": true
  }
}

This is how my e2e/tsconfig.json file is configured:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../dist/out-tsc/e2e",
    "target": "ESNext",
    "sourceMap": false,
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

My testcaferc.json setup is as follows:

{
  "compilerOptions": {
    "typescript": {
      "configPath": "./e2e/tsconfig.json"
    }
  }
}

In my e2e/src/test.e2e-spec.ts file, I have the following import statement:

import { noResults } from 'e2e/src/no-results';

The export in my e2e/src/noResults.ts file looks like this:

export const noResults = () => {...}

Unfortunately, I encountered this error:

- /home/IdeaProjects/angular/node_modules/testcafe/lib/cli/index.js
at Object.<anonymous> (/home/IdeaProjects/angular/e2e/src/test.e2e-spec.ts:7:1) {
  code: 'E1035',
    data: [
    "Error: Cannot find module 'e2e/src/noResults'\n" +
    'Require stack:\n' +
    '- /home/IdeaProjects/angular/e2e/test.e2e-spec.ts\n' +
    '- /home/deaProjects/angular/node_modules/testcafe/lib/compiler/test-file/formats/es-next/compiler.js\n' +
    '- /home/IdeaProjects/angular/node_modules/testcafe/lib/compiler/compilers.js\n' +
    '- /home/IdeaProjects/angular/node_modules/testcafe/lib/compiler/index.js\n' +
    '- /home/IdeaProjects/angular/node_modules/testcafe/lib/runner/bootstrapper.js\n' +
    '- /home/IdeaProjects/angular/node_modules/testcafe/lib/runner/index.js\n' +
    '- /home/IdeaProjects/angular/node_modules/testcafe/lib/live/test-runner.js\n' +
    '- /home/IdeaProjects/angular/node_modules/testcafe/lib/testcafe.js\n' +
    '- /home/IdeaProjects/angular/node_modules/testcafe/lib/index.js\n' +
    '- /home/IdeaProjects/angular/node_modules/testcafe/lib/cli/cli.js\n' +
    '- /home/IdeaProjects/angular/node_modules/testcafe/lib/cli/index.js'
  ]
}

Answer №1

Your module and fixture files are both located in the same folder. Therefore, the import statement can be modified as shown below.

import { noResults } from 'no-results';

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

Conceal a row in a table using knockout's style binding functionality

Is it possible to bind the display style of a table row using knockout.js with a viewmodel property? I need to utilize this binding in order to toggle the visibility of the table row based on other properties within my viewmodel. Here is an example of HTM ...

Is the angular.cli still necessary when using an Angular ejected project?

Angular ng eject Once a project is ejected, is it still necessary to have an angular.cli file in the project? If so, which specific keys in the angular.cli remain useful? ...

Fetching JSON data using Promise.all results in an empty response

I'm facing an issue in my code where I am trying to fetch data from two different JSON files and then return them as arrays. Even after implementing the solution below, it doesn't seem to be working as expected. Can someone guide me on how I can ...

Deleting an element in an Array of objects using Typescript

export class AppComponent implements OnInit { title = 'bucketList'; bucketList: BucketListItem[] = [ new BucketListItem( "Goa Trip", "Travel to Goa" ) ]; ngOnInit() { } onItemAdded(eventData) ...

Difficulty displaying SVGs in VueJS when using Typescript

I'm facing a strange issue that seems like it should be easy to solve. When using Vue with JavaScript as CDN, everything works perfectly (just like it does in Angular or any other framework). <img src="/assets/images/icons/myicoin.svg> However ...

Having trouble constructing a Node.js project due to issues with a specific imported library

In my Vue.js project, I am encountering an issue when importing libraries. Library1 imports without any errors, but when I try to import Library2 and run the Vue Node.js project build, it consistently fails at a specific line with the message 'buildin ...

Pending activation of the Timer Fired event

Below is some code I have for implementing swipe gesture functionality: this.topSlide = this.elementRef.nativeElement.querySelector('.product_rate_slide'); if (this.topSlide) { this.topSlide.addEventListener('touchstart', this.hand ...

TypeScript error TS2503: Namespace 'browser' not found

I encountered a problem while trying to compile TypeScript, resulting in the following error related to @cliqz/adblocker: node_modules/@cliqz/adblocker/dist/commonjs/request.d.ts:12:37 - error TS2503: Cannot find namespace 'browser'. 12 export t ...

NgRx Action Payload fails to trigger Effect, but no error messages are generated

I've exhausted all resources on Stack Overflow and still can't seem to figure this out. The issue lies in passing a payload into the 'GetUser' action. My intention is for this payload to go through the effect, and eventually be sent v ...

Spring Boot - The Ultimate Guide to Hosting Angular2 Compiled Files

Currently, I am using a Spring Boot restful server alongside an Angular2 front-end application. In an attempt to streamline the process, I have been trying to host the front-end files on Tomcat in order to avoid serving them separately. Unfortunately, desp ...

Place an image at the top of the canvas at a specific location

Currently, I am in the process of reconstructing this specific website My approach involves working with React (similar to the aforementioned site) and utilizing the same cropper tool that they have implemented. For cropping, I am incorporating react-imag ...

The router fails to navigate upon clicking after transitioning from beta to rc5 as a module

My routing configuration is as follows: import { Router, RouterModule } from '@angular/router'; import { HomeComponent } from './modules/home/home.component'; import { Step1Component } from './modules/step1/step1.component' ...

Utilizing cordova-plugin-playlist without prior familiarity with TypeScript

After several years of using Cordova to develop apps, I recently came across TypeScript for the first time. I am currently faced with the challenge of implementing cordova-plugin-playlist without any documentation available, except for an Angular5/Ionic ex ...

Encountering a roadblock while trying to install a package using NPM, as the installation process becomes halted at version [email 

Having trouble installing @angular/cli via npm. It seems to get stuck every time while trying to download the package chokidar. https://example.com/image.png Here is some diagnostic information: npm version 5.0.0 node version 8.0.0 OS: Windows 7 ...

Align the positioning of the dropdown menu and the input field

I'm having trouble with css and ng2-completer. I am attempting to line up the dropdown section with the input field. Unfortunately, there is no demo example provided on the page showing how to target elements using css. I've tried selecting the ...

What causes observables stream to be cancelled or stopped by my HTTP request?

I am facing an issue with adding a new property called Blobs to each application in an array of applications. I need to make a separate HTTP request to fetch Blobs for each application using the switchMap operator. However, the problem is that only the las ...

Utilizing process.env in TypeScript can be a bit tricky as dot notation is not effective for accessing its properties

When I set my scripts to: "start": "NODE_ENV=development nodemon dist/Server.js", I am encountering an issue when trying to access NODE_ENV in my code. Both dot and bracket notation return undefined: The dependencies in my project are: "@types/node": "^8. ...

Incorporating unit measurements into input data

I am currently working on styling an input to only accept numbers while allowing the user to add a unit of measurement (such as kg, km, etc.) immediately after the value. I prefer not to use span because I want the unit measurement to appear as the user st ...

TypeScript 5 introduces a versatile function with an argument that is determined by a conditional type

In my code, I have a type that consists of different config objects: type Types = | { kind: 'typeA', arg1: string } | { kind: 'typeB', arg1: string, arg2: string } I also defined a type called InnerType which extracts just the ki ...

How can React be used to constantly update a string whenever a checkbox is ticked, and subsequently show this updated string in a separate input field

I need to dynamically update a text input field each time a checkbox is checked as true. Could someone provide guidance on how to achieve this? My goal is to have a checkbox trigger an update in another input field. When the checkbox is checked, I want to ...