The Jasmine test is having trouble locating the imported variable

In my Angular project, I have a class set up as follows:

import { USERS } from "./data/users"; // imports an Array of Objects

export class User {
    constructor(name: string) {
        const user = USERS.find(e => e.name === name);
    }
...
}

Everything is working smoothly when I compile and build the website. However, when attempting to run unit tests using Jasmine, an error occurs stating

TypeError: Cannot read property 'find' of undefined
because the test cannot locate the variable USERS. My spec file looks like this:

import { User } from './users.module';
import { USERS } from "./data/users";

describe('UserModule', () => {
  let userModule: UserModule;

  beforeEach(() => {
    userModule = new UserModule();
  });

  it('should create a user', () => {
    const user = new User("Testuser");
    expect(user).toBeTruthy();
  });
});

I'm puzzled as to why the User class can't find the USERS variable during testing, while it's able to do so in production. What modifications should I make for the class to locate that variable during testing?

Answer №1

There seems to be a discrepancy in the spec file you shared. The class User is being imported but it's not utilized; instead, an instance of UserModule is being created. This could potentially be causing the issue.

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

Tips for creating a TypeScript function that is based on another function, but with certain template parameters fixed

How can I easily modify a function's template parameter in TypeScript? const selectFromObj = <T, S>(obj: T, selector: (obj: T) => S): S => selector(obj) // some function from external library type SpecificType = {a: string, b: number} co ...

What is preventing the spread type from being applied to `Record` in TypeScript?

export type AddResourceProps<K extends string, T extends any> = (resource: BasicResource) => Record<K, T> const addtionalResourse = addResourceProps ? addResourceProps(resource) : {} as Record<K,T> const result = { ...addtionalRe ...

My HTML grid table is not being properly rendered by the JSON data

I'm currently facing a challenge with rendering my HTML grid table in Angular using JSON data retrieved from a MySQL database. I would greatly appreciate any assistance or guidance on how to solve this issue. View the output of the Angular code here ...

Angular 6 tutorial: Creating a dynamic side navigation bar with swipe and drag functionality using Angular Material/Bootstrap

I am currently working on implementing a vertical swipeable/stretchable side nav-bar with angular-material in angular 6. However, I have encountered an issue with mouse interactions for stretching the nav-bar. Below is the code snippet: Here is the HTML c ...

Dialog box obscuring PrimeNG dropdown menu

I'm working on an Angular2 app that utilizes PrimeNG components. My issue arises when trying to include a dropdown inside a dialog box. Despite my implementation, the dropdown ends up being cut off due to the constraints of the dialog box, as visible ...

Experience inadequate test coverage while conducting unit tests in Vue.js

I'm currently working on Vuejs unit testing using karma+mocha+chai+webpack and aiming to achieve code coverage with istanbul. However, I've encountered an issue where importing certain utility functions or components into the component being tes ...

Bringing in CSS variables to a Typescript document

In order to streamline the styling process for our app, we have established a theme.css :root file containing a set of commonly used variables that can be accessed across all other .css files. However, some of our older code follows a similar structure bu ...

Ways to transfer information from HTML form components to the Angular class

I am currently working with angular 9 and I have a requirement to connect data entered in HTML forms to the corresponding fields in my Angular class. Below is the structure of my Angular class: export interface MyData { field1: string, textArea1 ...

What is the best way to transition a connected component from a class-based to a functional component in TypeScript?

I'm in the process of switching from a class-based component to a functional component. This is a connected component that uses mapState. Here is my initial setup: import { connect } from 'react-redux' import { fetchArticles } from '. ...

Refreshing the sub attributes of an incomplete entity

My Partial object contains sub-properties that may be undefined and need updating. interface Foo { data: string otherData: string } interface Bar { foo: Foo } interface Baz { bar: Bar } let a: Partial<Baz> = {} //... Goal: a.bar.foo ...

Encountering an npm package resolution error despite following all of the necessary requirements

error message: ERESOLVE Unable to resolve dependency Issues encountered while resolving: @ionic/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52333c35273e332012657c667c60">[email protected]</a> Found: <a href ...

One server hosts several Angular applications on an IIS website

Is it possible to host multiple independent angular applications on a single IIS virtual directory? For instance: mysite.com/admin mysite.com/sales mysite.com/inventory The issue arises when hosting with folders as the URLs to inner pages do not ...

In Ionic 4, a special character is showing up before the form tag

I'm facing a bizarre issue with my Ionic 4 app... a strange character is appearing before the form I tried using Google DevTools, but I couldn't identify how this extra character is being injected before the form If anyone has encountered this ...

Contrasting the double dash without any arguments versus the double dash with a specific argument, such as "no-watch."

For instance, when attempting to run unit tests for an Angular app, the following command is used: npm run test -- --no-watch --browsers=ChromeHeadlessCI I know that two dashes (--) are required to pass arguments into the npm script. However, I'm con ...

Tips for dynamically loading a child component and passing data from the child component to the parent component

In my current setup, I have organized the components in such a way that a component named landing-home.component loads another component called client-registration-form.component using ViewContainerRef within an <ng-template>, and this rendering occu ...

Error: The AWS amplify codegen is unable to locate any exported members within the Namespace API

Using AWS resources in my web app, such as a Cognito user pool and an AppSync GraphQL API, requires careful maintenance in a separate project. When modifications are needed, I rely on the amplify command to delete and re-import these resources: $ amplify r ...

Challenges Experienced by AoT in Live Operations

So in my project, I have various components and services included where necessary. To ensure their accessibility, I made sure to declare all the services as private within the constructor. Here's an example: constructor(private myService: MyService) ...

How do you transfer byte[] data using a DTO in Java Spring?

I am currently facing an issue with my server-side application. The problem arises when attempting to convert a Blob to an Excel file on the front-end, specifically when the byte[] is sent within a DTO. When sending a POST request from the back-end (sprin ...

What are the main challenges in resolving dependencies and implementing best practices when it comes to updating an outdated Angular NodeJS

After several months away, I am now faced with the challenge of updating and maintaining an out-of-date angular project. Seeking advice from experienced developers on how to tackle this situation. Previously, I used NPM update or upgrade commands to keep ...

Issues arise when attempting to override attributes within the HTML of a parent component in Angular

Why does overriding an attribute in a child class that extends from another not work as expected? Here's a made-up scenario to simplify the issue: Parent class file: gridbase.component.ts import { Component, OnInit } from '@angular/core'; ...