Typemoq and Angular-cli are incompatible with each other

Many Angular 2 cli applications come with karma-jasmine tests already set up.

If you decide to enhance your tests by using typemoq, simply run the command npm install typemoq --save-dev

Then, include typemoq in one of your test files like this:

import * as Moq from 'typemoq';

...

it('pointless test is pointless', async(() => {
   let carMock = Moq.Mock.ofInstance(Car);
}));

class Car { ... }

However, after adding typemoq, some users have reported encountering the following error when running their tests. Have you faced a similar issue while working with typemoq in angular-cli projects or while adding dependencies to angular-cli projects?

TypeError: Cannot read property 'substr' of undefined at Function. (C:\Source\ng-example-app\foo\node_modules\webpack-sources\node_modules\source-map\lib\source-node.js:115:26)

Answer №1

After carefully following the steps you outlined, I have successfully completed the following tasks:

  • Installed the most recent angular-cli version 1.0.0-beta.21 using the command: npm install -g angular-cli

  • Added the newest typemoq version 1.0.2 with the command: npm install --save-dev typemoq

  • Created a new project by running:
    ng new PROJECT_NAME && cd PROJECT_NAME
  • Inserted code into ./src/app/app.component.spec.ts:
import * as Moq from 'typemoq';
...

it('pointless test is pointless', () => {
    let carMock = Moq.Mock.ofInstance(Car);
});

class Car {
}
  • Executed the command ng test --watch=false which resulted in the following output:

    Executed 4 of 4 SUCCESS (0.163 secs / 0.157 secs)

Have you encountered any errors even after updating to the latest versions of angular-cli and typemoq?

Answer №2

Encountered a similar issue with TypeMoq and webpack.

After trying out your provided sample, it ran smoothly on my system.

The problem appears to be more about how webpack interacts with the sourcemaps, as discussed in this source-map GitHub issue.

To resolve the webpack/TypeMoq project, I followed the suggestions mentioned above and removed the sourcemap comment at the end of typemoq.js.

Despite not having much experience with webpack/js, it seems like the source-map may be the culprit rather than TypeMoq.

REVISITED

I believe my issue stemmed from an inconsistent setup when transitioning from systemjs to webpack. Karma faced difficulties remapping JavaScript coverage back to TypeScript, potentially causing source-map to receive incomplete information instead of a mapping file.

To detail how I resolved the issue, I performed the following steps:

  1. Cloned the Angular2-Webpack-starter example
  2. Built and executed karma start karma.conf.js
  3. Used a diff tool to minimize discrepancies between sample files and personal files, starting from karma.conf.js, then spec.bundle.js, and webpack.test.js

If encountering a 'Could not find sourcemap' error (GitHub Issue 1117)

You may need to update to the latest istanbul-instrumenter-loader - refer to GitHub Issue 1188. As of now, version 0.2.0 is recommended.

Once everything was reset and returned to basics, everything appeared to function correctly... for the time being. :-)

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

Error in JScript encountered during the downgrade to .NET Framework 2.0

Working on a Web Application project has brought about some challenges for me. Originally created in .NET 3.5, I recently found out that it has to be converted to .NET 2.0 (sigh). This transition not only caused issues with the LINQ functionalities but als ...

Monitor changes in input display within ngIf statements

Within my code, I am utilizing an input element within a conditional statement of *ngIf: <div *ngIf='display'> <input number="number" /> </div> My goal is to be able to detect the visibility state of the input element insi ...

Joining a variable to an image URL using Vue.js

I recently started learning Vue.js and I'm struggling to figure out how to create an image with a dynamic src file path that includes a variable. Concatenating in Vue.js has been challenging for me. This is the image I currently have: <img :src=" ...

What is the best way to receive the result of an asynchronous function as an input and showcase it using express?

I have recently started learning about node and express My goal is to create an API that can fetch data from an external source and use that data for my application Is there a way to retrieve the result of an asynchronous method and display it using the ...

What is the best method for deleting scripts to optimize for mobile responsiveness?

My current plugin.js file houses all my plugins for responsive design, but it is unnecessarily large and cumbersome for mobile devices. I am considering creating two separate plugin.js files to toggle between for mobile and desktop views. What are the r ...

Is it feasible to incorporate an Angular environment variable into an SCSS file?

I'm trying to come up with a solution for dynamically compiling my `scss` based on different environment profiles. Each location where my app will be installed has a different theme, but the CSS remains the same. The only thing that needs to change is ...

Displaying preprocessing before downloading on the frontend side

Let me walk you through the process first - A user initiates a download request (jsp) Based on the user's parameters (in spring mvc controller mapping), a single excel workbook is created by merging multiple other excel sheets (~40). The final workb ...

Removing cookies with angular js: A simple guide

I have a list of cookies that contain commas, and I want to remove a specific item when it is clicked. Here is an example of how my cookies are structured: 879273565,879269461,879273569,659234741 artistcontrollers.controller("CartController", ["$scope", ...

Utilizing Angular and Typescript for Enhanced Modal Functionality: Implementing Bootstrap Modals in Various Components

When working in Angular, I have a component called Modal. I need to open the same Modal Component from two different places. The catch is, I want the button text in the Banner image to say "Get Started Now". Check out the Image linked below for reference. ...

What is the best way to store data from multiple selected rows in different datagrids into a single state?

Programming Languages : JavaScript with React, Redux Toolkit, and Material-UI Issue : My goal is to synchronize the selection of checkboxes across multiple datagrids into one central state Attempts Made : I first attempted to manage checkbox selection fo ...

The null object does not have a property addEvenListener and therefore cannot be

My goal is to develop a simple single-page application without using any frameworks, focusing on providing users with tutorials on specific subjects. I am encountering an issue with the javascript code for my page, receiving the following error: Uncaug ...

What is the best way to retrieve a string from a lambda expression?

I am trying to call the function myFunction() and retrieve the source._id value, but I'm encountering issues with the current code. Even though source._id is correctly filled, I am unsure of how to successfully return it in its entirety. Ideally, some ...

What is the method for organizing object bodies (parent/child) in Cannon.js?

After extensively searching and reviewing issues and documentation, it seems that apart from establishing a constraint between two Cannon bodies, there is no direct method to unite shapes of varying masses. Currently, I am using the lockConstraint approac ...

Implementing Vue.js pagination along with making http requests

My table features a pagination-nav component: <b-pagination-nav :link-gen="linkGen" limit="5" :number-of-pages="10" use-router> </b-pagination-nav> To retrieve the table content, I am utilizing the getTrades met ...

Use jQuery to update the field without affecting the observable

Greetings to the wonderful stackoverflow community! I recently delved into using knockout just a few days back. Currently, I am utilizing it to create a dynamic menu builder for a CMS project that I'm deeply engrossed in. If you'd like to take ...

Utilizing the useRef hook in React to retrieve elements for seamless page transitions with react-scroll

I've been working on creating a single-page website with a customized navbar using React instead of native JavaScript, similar to the example I found in this reference. My current setup includes a NavBar.tsx and App.tsx. The NavBar.tsx file consists o ...

Optimizing the rendering of Font-awesome CDN JS for better performance on Pagespeed Insights

Instead of directly linking to the Font Awesome CSS, I have chosen to leverage the JavaScript provided by the trustworthy and efficient Font Awesome CDN. This allows for asynchronous loading of icons on my homepage, ensuring a seamless user experience. How ...

Unlimited scrolling feature in Laravel 5 div

Hey everyone, I'm new here and could really use some help fixing the infinite scroll for a div that's not working in Laravel 5. I've searched through countless links for solutions but nothing seems to be working... Here is my JavaScript: $ ...

How can parameters be passed to a JavaScript or jQuery function?

I am currently utilizing a JS/JQ function to convert values into currency by adding commas. Although the function is running smoothly, I am encountering an issue when attempting to pass parameters to it. Kindly provide assistance on how to successfully pas ...

Can one iterate over a JavaScript object using forEach() even if the keys are undefined?

During a code review, I came across the following code: var a = { ... }; // an object filled with key-value pairs for (var key in a) { if (!angular.isUndefined(key)) { do.stuff(); } } I am questioning whether key can ever be undefined or ...