Incorrect Configuration of Angular Testing Module Leads to Failure in Resolving Parameters (NgRx)

Struggling with setting up tests in my Angular CLI 6 project. Here's a snippet from my testing code:

beforeEach(() => {
  spyOn(console, 'info');

  TestBed.configureTestingModule({
    providers: [
      ConsoleLoggerEffects,
      provideMockActions(() => actions),
    ],
  });

  effects = TestBed.get(ConsoleLoggerEffects);
});

The ConsoleLoggerEffects class has a single dependency - the Actions observable:


@Injectable()
export class ConsoleLoggerEffects {
  constructor(private actions$: Actions) { }
}

Following the ngrx example, but things aren't working as expected.

When running the tests, I encounter an error message stating

Error: Can't resolve all parameters for ConsoleLoggerEffects: (?)
. Even after adding a console.log to the factory function inside provideMockActions, it doesn't seem to be getting called.

Not even manually specifying a provider works:

TestBed.configureTestingModule({
    providers: [
      ConsoleLoggerEffects,
      { provide: Actions, useValue: new ReplaySubject(1)}
    ]
  });

Any thoughts on what could be causing this issue?

Answer №1

I encountered a similar issue and managed to solve it after making some adjustments to my tsconfig.spec.json file. I deleted the node_modules folder and then reinstalled them.

Here is the updated version of my TS Spec configuration file:

You can also refer to the one found in the example-app on https://github.com/ngrx/platform

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2017", "dom"],
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es6",
    "types": ["jest", "node"],
    "baseUrl": ".",
    "rootDir": "./"
  },
  "files": [
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

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

Monitor the behavior of a function that is provided as an argument to a simulated node package

Currently, I am in the process of creating a custom client that integrates the robust SignalR library: export class RealTimeCommunicator { /** SignalR hub connection */ private hubConnection: HubConnection | null = null; private buildConnection(ur ...

Unable to inject NgControl into validator directive in Angular 6

I've encountered a challenge while trying to create a custom validator for a template-driven form. I'm aiming to constructor inject the NgControl of the host element, which is equipped with an NgModel directive. Unfortunately, I'm consistent ...

Having trouble with building an Ionic3 project, getting the error message: "Execution failed for task ':app:processDebugResources'. > Failed to execute aapt"

My attempt to develop an android app in ionic 3 hit a roadblock when running 'ionic cordova build android' resulted in the error: Execution failed for task ':app:processDebugResources'. > Failed to execute aapt I have integrated plug ...

Do not display the outcome of the unsuccessful Ajax registration attempt

I am facing an issue with my AJAX post method. When the account is successfully created, it should alert "account successfully created", but if it already exists, it should alert "account already exists". However, the problem is that it still alerts the sa ...

To demonstrate movement through both revealing and concealing

Currently, I am working on an assignment that involves rotating an image on hover. My task is to rotate the image first, then animate another object once the image rotation is complete. Upon mouse out, the initial image should return to its original positi ...

Tips for showing the React-Select array label in a text field

I'm a beginner in the world of React and I've encountered a puzzling issue. I'm attempting to showcase the selected value from a dropdown component in the adjacent text field in my React project. Can anyone guide me on how to achieve this? ...

What is the best way to send a JavaScript array to a Perl script using AJAX?

Is it possible to convert a JavaScript array passed via AJAX into a Perl array? Accessing in Perl: @searchType = $cgi->param('searchType'); print @searchType[0]; Result: employee,admin,users,accounts It appears that the first value in the ...

Utilizing the toastr service through Angular injections

I am looking to manage common HTTP errors by using the Angular Materials MDSnackbar service. However, I am struggling to figure out how to implement it properly. When I add MdSnackBar to the constructor like private mdsnackbar: MdSnackBar, it gives me an e ...

How can I efficiently update child states within a parent class using ReactJS?

Exploring the parent component class Root extends React.Component { constructor(props) { super(props); this.state = { word: Words, }; } c ...

What is the best way to insert a hyperlink into the header of a column in a React table that is built using Material

// Here is the header const dataCells = [ {id:"Customer_ID",label:"CustomerId"}, {id:"Type", label: "Type"}, {id:"First_Name", label: "First Name"}, {id:"Last_Name", labe ...

Encountering the error "TypeError: null is not an object (evaluating '_ref.user')" with onAuthStateChanged in React Native using Firebase and useContext

I'm encountering an error in my useCachedResources.ts file and I'm uncertain of the cause. These three files are what I'm currently working with. I have a suspicion that the issue lies in the initial null value, but I am conditionally render ...

Loading indicator displayed at the top of a div using JavaScript/jQuery

My current challenge involves implementing a progress bar, similar to the pace.js progress bar. The issue arises when the browser is refreshed, as the pace.js progress bar loads on top of the body instead of within a specified div. It is important that the ...

Handling button and AJAX requests in Node.js involves creating event listeners for

I'm in the process of developing a single page application and I'm second-guessing my approach. Currently, I have a system in place where each button that requires a callback from the server triggers an ajax request. On the server-side, I handle ...

Processing message received from Node JS Server

Currently, I am working on a project that involves compiling a specific Java file on the server side. In case there are any errors during compilation, I aim to capture the error information and relay it back to the client side. However, despite trying vari ...

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

Are there any JavaScript event listeners or CSS pseudo classes that can detect when a scrollbar appears and disappears? For example, on Mac OS and Windows Internet Explorer 10 or newer, the scrollbars are hidden by default but appear when scrolling begins. ...

The React getTime() method does not properly update the state

I am attempting to update the state of the component Demoss using an external function called getTime(). My goal is to start updating the time in the state time when the page loads. In order to achieve this, I have called it in the componentDidMount meth ...

What is the significance of the message "JavaScript files do not have any valid rules specified"?

I am working on a React - Typescript project that was created using the following command: create-react-app my-app --scripts-version=react-scripts-ts While it compiles without any issues, I keep receiving a message or warning that says: No valid rules h ...

Ways to retrieve an image uploaded on a nestjs server

I am facing an issue with my NestJS server where I have uploaded images but cannot access them as they appear to be some unreadable data. I have tried converting them to a blob and then setting it as an object URL for the image tag, but that also did not w ...

Is it possible to utilize Angular CLI for publishing Angular2 components on NPM?

Is it possible to leverage the Angular CLI to develop and distribute an Angular 2 component on NPM and Github? Are there specific coding procedures that need to be adhered to in order to meet the criteria for publishing the component? ...

Tips for verifying if a webpage request originated from a user's inbox

I am currently working on a web application that sends a download link to subscribers. Subscribers can click the link from their inbox to access and download a pdf document. However, I am looking for a way to restrict access to the pdf document only when ...