Import a function throws type error exception

[Rumpelstinsk]

Current behavior:

Importing a function from a diferent file throws a type error

Test code to reproduce

I want to test a page wich uses basic auth. So I write this line on a test:

cy.visit("/my_url", { auth:{
      username: Cypress.env("BASICAUTH_USERNAME"),
      password: Cypress.env("BASICAUTH_USERNAME")
    } });

This line works with no problem. However, I want to test other pages with basic auth too. So, in order to avoid repeating this object I made a function to retrieve it:

//Auth.js"
export default {
  basicAuth: () => {
    return {
      username: Cypress.env("BASICAUTH_USERNAME"),
      password: Cypress.env("BASICAUTH_USERNAME")
    };
  }
};

Then I import it on my original test file:

import { basicAuth } from "./Auth";

//other lines here:

cy.visit("/my_url", { auth:basicAuth() });

Then when I run the code, I get a Type error on console:

> TypeError: Auth_1.basicAuth is not a function
      at xxxxxxx (#URL-Here#/__cypress/tests?p=test/app.spec.js-193:74:26)
      at Context.<anonymous> (#URL-Here#/__cypress/tests?p=test/app.spec.js-193:29:13)

Versions

Cypress/included:4.4.0 from https://github.com/cypress-io/cypress-docker-images

[jennifer-shehane]

This is a regression introduced in 4.4.0. I'm able to replicate this with the code below:

cypress/integration/spec.js

import { getUrl } from "./url"

it('tests', () => {
  console.log(getUrl())        // prints fine
  cy.visit({ url: getUrl() })  // errors
})

cypress/integration/url.js

export default {
  getUrl: () => {
    return "https://example.cypress.io"
  }
}

4.3.0

4.4.0

The console.log() prints the correct string after calling the function. But Cypress throws an error, notice the attribution to url_1.js, which is...not the name of the file?

[jennifer-shehane]

This fails with function being called in the options object, may be related to cloning the options? #6459

The only other big change in 4.4.0 was the TypeScript support. #5906

Any of these PRs could effect this @sainthkh?

[sainthkh]

I'll check it out.

[sainthkh]

The cause was the typo in the code I wrote. Because of that, typescript was used to parse your file. To make it work, the code had to be written like import { default as { getUrl } } from './url'. It's not intuitive.

#7072 fixes the problem and babel parser will be used when you didn't include typescript inside your project like before.

If you're trying to adopt TypeScript, your code won't work. It is recommended to use named export instead like below:

export const basicAuth = () => {
    return {
      username: Cypress.env("BASICAUTH_USERNAME"),
      password: Cypress.env("BASICAUTH_USERNAME")
    };
  }