Transitioning to TypeScript: Why won't my function get identified?

I am in the process of transitioning a functional JavaScript project to TypeScript. The project incorporates nightwatch.js

Below is my primary test class:

declare function require(path: string): any;

import * as dotenv from "dotenv";
import signinPage = require("../built/pages/signinPage.js");
import instancesPage = require("../built/pages/instancesPage.js");
dotenv.config();

module.exports = {
    'User can sign in'(client) {

        console.log("Sign in as email: " + process.env.EMAIL);

        signinPage
            //   .navigate()
            .signin(process.env.EMAIL, process.env.PASSWORD);

        // allow time for loading

        client.pause(5000);

        instancesPage.expect.element('@homepageWelcomeTitle').text.to.contain('Welcome to the CJDocs Home!');

        client.end();
    }
}

Here is the pageObject that contains the problematic function:

  module.exports = {  
  signin: function(email, password) {
    return this
      .waitForElementVisible('@emailInput')
      .setValue('@emailInput', email)
      .setValue('@passwordInput', password)
      .waitForElementVisible('@signinButton')
      .click('@signinButton')
  },
  elements: {
    emailInput: {
      selector: 'input[type=email]'
    },
    passwordInput: {
      selector: 'input[name=password]'
    },
    signinButton: {
      selector: 'button[type=submit]'
    }
  }
};

Upon running this (via terminal using NPM test), I encounter an error:

TypeError: signinPage.signin is not a function

It appears that signinPage.signin does exist as a function.

What could be causing the function to not be recognized?

Answer №1

This particular code is heavily focused on JavaScript/ES5 rather than TypeScript (TS). One suggestion to consider is changing import signinPage to import * as signinPage. This adjustment may prove beneficial.

However, I highly recommend exploring ES6/TS features such as classes. For instance, create a file named signinPage.ts:

export default class signinPage {
  signin(email, password) {
    return this
      .waitForElementVisible('@emailInput')
      .setValue('@emailInput', email)
      .setValue('@passwordInput', password)
      .waitForElementVisible('@signinButton')
      .click('@signinButton')
  }
  get elements() {
    return {
      emailInput: {
        selector: 'input[type=email]'
      },
      passwordInput: {
        selector: 'input[name=password]'
      },
      signinButton: {
        selector: 'button[type=submit]'
      }
    }
  }
}

Next, update your import statement to

import singinPage from "../src/pages/signinPage"

By doing so, you'll be referring from one TS file to another TS file without the need for the .ts extension.

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

Using JavaScript to extract data from a JSON-formatted URL

I am currently facing a challenge with parsing JSON data from a specific URL. Despite my efforts, I am unable to retrieve any information related to the "ask" and "bid" values from this JSON feed. The URL in question is . The structure of the JSON data is ...

Connecting React.js with Socket.io for real-time communication and managing application

Hello, I am currently working on saving the response from my socket in a state via the backend. Here is a method where messages are sent to the socket: export default class Home extends Component { constructor(){ super() this.state ...

Cookie parsing functionality in Node JS malfunctioning

Currently, I am working through a tutorial on cookie management in Express JS found at . The goal is to implement cookies in my web application to authenticate requests to an API that I am constructing with Node JS. To set the cookie upon user login, I emp ...

Is there a way to effortlessly upload numerous files in one go when browsing with jquery or JavaScript?

Currently working on a web application and looking to enable multiple file upload functionality within a single browse session, as opposed to selecting one file at a time. The goal is for users to be able to easily select multiple files with just one clic ...

Error occurred due to a reference to a function being called before it was

Occasionally, I encounter a "Reference Error" (approximately once in every 200 attempts) with the code snippet below. var securityPrototype = { init: function(){ /* ... */ }, encryptionKey: function x() { var i = x.identifier; ...

"Navigating through events with confidence: the power of event

Imagine I am developing an event manager for a chat application. Having had success with event maps in the past, I have decided to use them again. This is the structure of the event map: interface ChatEventMap { incomingMessage: string; newUser: { ...

When initialized within an object, Angular may identify a field as undefined

Whenever I attempt to access a property of the object named "User," it shows up as undefined. However, upon logging the complete object to the console, the field appears with the necessary data. Here is the console log output: perfil.component.ts:42 unde ...

Comparing json results from ng-repeat against an array

Currently, I am working with a JSON result that appears in an ng-repeat and I want to filter it based on separate data objects or arrays: Controller.js $scope.jsonResult = [ { "id": "a123" }, { "id": "b456" } ] HTML <span ng-repeat="r in js ...

What is the best way to retrieve data from an Express endpoint within a React component?

I am working on integrating a React component with an Express endpoint that returns the string "sample data". The goal is to call this endpoint from my React app, store the text in state, and then display it on the screen. Here is my component: class App ...

Issue with $sce.trustAsResourceUrl(url) function in angularJS

Having trouble with loading a file into an iframe. Here is the code for the iframe: <iframe width="100%" height="800px" scrolling="no" ng-src="{{someUrl}}"></iframe> In the controller, I am trying to: $scope.someUrl = $sce.trustAsResourceUr ...

Retrieve and process information retrieved from an Ajax call in ASP.NET using AJAX

When I receive a list of data from an Ajax call, it looks like this. $(document).ready(function () { var hashtag = 'dilwale' var accessToken = '16741082.1b07669.121a338d0cbe4ff6a5e04543158a4f82' $.ajax({ url: ' ...

Is there a way to restrict the number of line breaks in a multiline asp:TextBox control?

Is it possible to restrict a multiline asp:TextBox to only display content on 3 lines using either javascript or C#? ...

Loop over elements retrieved from Firebase using ng-repeat

I am currently attempting to iterate through items retrieved from Firebase using ngrepeat. Although I can see the items in the console, the expressions are not working as expected. I have tried various solutions, but nothing seems to be working. Any assist ...

When running "npx create-nuxt-app" followed by "npm run dev", an error occurs stating that there

Recently, I started using Nuxt and initiated my app with npx create-nuxt-app my-app, setting the parameters as follows: Project name: client Programming language: JavaScript Package manager: Npm UI framework: Tailwind CSS Nuxt.js modules: Axios - Prom ...

Set the class function to be uninitialized

I'm a little unsure of my TypeScript knowledge. I have a class MyClass with a member variable that is a function, but I don't know what this function will be at compile time. I want to allow external code to set this function dynamically during r ...

Is it possible to exclude specific URLs from CSRF protection in sails.js?

I am currently integrating Stripe with my sails.js server and need to disable CSRF for specific URLs in order to utilize Stripe's webhooks effectively. Is there a way to exempt certain URLs from CSRF POST requirements within sails.js? I have searched ...

Avoid refreshing the page when adding an item to the cart

I am in the process of creating a online shopping cart and I'm looking for ways to avoid the page from reloading when adding a product to the cart. At the moment, my approach involves using the GET method to add products to the cart. <a href="car ...

JavaScript Grouping Arrays

I am working with an array and need to filter it by both Country and Service. So far, I have successfully filtered the array by Country. Now, I want to achieve the same filtering process based on the Service as well. Here is a snippet of the array: [ ...

Console displays null as the attribute value

When I check the console, I notice that the data-postid attribute is displaying 'null'. What could be causing this issue? I would like to view the data-id in the console when clicking on the button with the id modal-save. I have reviewed my cod ...

Angular: Connecting template data to different visual presentations

Looking for a solution to display data and map values to another presentation without needing complex ngIf statements or creating multiple components. Check out this sample: https://stackblitz.com/edit/angular-9l1vff The 'vals' variable contain ...