What is the best way to save the output of an asynchronous function into a class attribute?

Currently, I am attempting to retrieve HTML content from a webpage by utilizing a class equipped with a single asynchronous method. This process involves Typescript 3.4.3 and request-promise 4.2.4.

import * as rp from 'request-promise';

class HtmlFetcher {

  public uri: string;
  public html: string;

  public constructor(uri: string) {
    this.uri = uri;
  }

  public async fetch() {
    await rp(this.uri).then((html) => {
      this.html = html;
    }).catch((error) => {
      throw new Error('Unable to fetch the HTML page');
    });
  }

}

export { HtmlFetcher };

To validate my class functionality, the following code is employed in conjunction with Jest 24.8.0. It's important to note that the URI specified at line 6 is strictly for testing purposes; alternative URIs have also been experimented with.

import { HtmlFetcher } from './htmlFetcher.service';

describe('Fetch HTML', () => {

  it('should fetch the HTMl at the given link', () => {
    const uri = 'http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm';
    const fetcher = new HtmlFetcher(uri);
    fetcher.fetch();

    expect(fetcher.html).toBeDefined();
  });

});

The objective is for the html property to store the fetched HTML string from the designated address post-execution of the fetch() method. Nevertheless, the test currently fails, indicating that fetcher.html remains undefined. Unfortunately, reference to the Typescript, Jest, and request-promise documentation has not yielded any insights. What could be the issue?

Answer №1

I finally found the solution with the help of TKoL's comments and revisiting a documentation I've already gone through multiple times, specifically: Jest async testing. It turns out I needed to pay more attention when reading the manual...

Remember, the test code also needs to be async.

import { HtmlFetcher } from './htmlFetcher.service';

describe('Fetch HTML', () => {

  it('should fetch the HTMl at the given link', async () => { // Don't forget the async keyword
    const uri = 'http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm';
    const fetcher = new HtmlFetcher(uri);
    await fetcher.fetch(); // Make sure to use the await keyword

    expect(fetcher.html).toBeDefined();
  });

});

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

The HTML attribute "hasbox" specifies the presence of a box within the element

I am currently working on resolving some rendering issues specifically in IE9 and have encountered a tag attribute that I am not familiar with - hasbox. Upon further investigation, it seems like IE is injecting this attribute at runtime as it does not app ...

Combining a group of JavaScript objects

I am facing a challenge with my collection as I need to perform aggregation using only JavaScript. I have attempted various approaches utilizing the Lodash library but unfortunately, I have not been successful. If you could provide me with some guidance on ...

Can we determine the data type of an object based on a property within an interface?

Here is my current interface: MyInterface { prop1?: string, prop2?: string, } Now, I am looking to introduce an alternative property that mirrors the content of the existing properties but also infers if any properties are defined. For instance: ...

Guide on converting JSON to CSV in React by utilizing the map function

When I convert JSON data to CSV by clicking a button, it currently stores the data in the CSV file separated by commas. However, I want each piece of data to be on its own line. How can I achieve this? For example: Minor,Minor What I Want: Each item on a ...

The risk of a race condition could arise when working with nested switchMaps in ngr

I am currently working on an Angular 9 application that heavily relies on observables. In a specific component, I have the following requirements: Retrieve all companies to access certain information. Fetch all responses and link additional company detai ...

What is the difference between TypeScript's import/as and import/require syntax?

In my coding project involving TypeScript and Express/Node.js, I've come across different import syntax options. The TypeScript Handbook suggests using import express = require('express');, while the typescript.d.ts file shows import * as ex ...

Trying out asynchronous testing using Mocha and Sinonjs for the first time

In my current project, I am utilizing a custom micro framework developed by our team, where we make use of Mongoose. To handle the mongoose object, we have implemented a modelfactory that provides us with a corresponding model based on the mongoose name o ...

Node.js promises are often throwing Unhandled Promise Rejection errors, but it appears that they are being managed correctly

Despite my efforts to handle all cases, I am encountering an UNhandledPromiseRejection error in my code. The issue seems to arise in the flow from profileRoutes to Controller to Utils. Within profileRoutes.js router.get('/:username', async (r, s ...

What is the best way to create 2 select boxes that will disable each other if they match, and then automatically choose the second option so they do not match

Is there a way to have 2 select boxes automatically change one option to the second option on one box when they match? Instead of using an "alert", I am looking for a function that can automatically update one option in one of the select boxes if they mat ...

What is the best way to incorporate server-side rendered content from a CMS to hydrate Vue.js?

Consider this scenario: content is managed through a traditional CMS such as Joomla or Drupal content is provided by the CMS as fully rendered HTML and CSS In the Frontend React.js should be utilized for all UI interactions. Despite going over most of R ...

The mongoose library requires JSON input, yet it is unable to generate a dynamic JSON object from a Node

This question delves more into javascript and JSON concepts rather than focusing on the mongoose library. When working with Mongoose, conditions are expected to be in JSON format, like so: { $or: [ { "doc_no" : /first/i }, { "doc_type" : /second/i } ] ...

Is there a workaround in TypeScript to add extra details to a route?

Typically, I include some settings in my route. For instance: .when('Products', { templateUrl: 'App/Products.html', settings: { showbuy: true, showex ...

React throwing an error when trying to use inline fontWeight styling with Typescript

I am currently working on applying a CSS rule to a td element. const boldText = { fontWeight: 'bold' } <td style={boldText}>Content</td> Unfortunately, I am encountering the following error: [ts] Type '{ style: { fontWeig ...

Any ideas on how to extract binary data from PHP passthru using a JavaScript ajax request?

I am facing an issue with retrieving and playing an audio file from a server using JavaScript. The ajax call in my code doesn't seem to callback, and I'm not certain if I'm handling the audio correctly in JavaScript. Below is the PHP file t ...

Utilizing Google's Text-to-Speech Service to Download Audio Files on the Front-end

I have a specific need to transform text into audio by utilizing Google Text to Speech. Currently, I am implementing Nodejs to convert the text into an audio file and aiming to transmit the audio result to the user interface. The NodeJS code snippet is a ...

Develop an AJAX script for processing multiple form inputs in PHP and HTML

I am working on a code that involves multiple form submissions, but the submit functionality is not working due to having multiple submits on one page. I have realized that I need an Ajax script to handle this, but I am new to it. Can someone provide me wi ...

Having trouble with triggers: Unable to locate the module 'csv-parse/sync' for parsing

Currently, I am utilizing Firebase functions to create an API that is capable of parsing CSV files. However, whenever I attempt to utilize csv-parse/sync instead of csv-parse, my deployment to Firebase Functions encounters a failure with the subsequent er ...

Exploring the combination of Holder.js and Rails routes

What's the best way to integrate Holder.js into my Rails application? I'm running into issues where Rails is interpreting the parameters passed to the script as routes and returning 404 errors. Has anyone successfully implemented this before? ...

Adjust Navbar Header Color Based on Screen Size

I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3. One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change ...

The Gatsby + Typescript project is reporting that the module with the name "*.module.scss" does not have any exported members

I've recently gone through Gatsby's demo project in their documentation (which is long overdue for an update). I've carefully followed the instructions provided here: I've included an index.d.ts file in the /src directory of my project ...