Cypress: Fixtures do not support JavaScript in .js files

[dkreft]

Current behavior:

Any attempt to use valid ES5 (e.g. var, require) let alone ES6 (import, export, const) results in syntax errors, e.g.:

Error: 'admin.js' is not a valid JavaScript object.SyntaxError: Unexpected token var

Because this error occurred during a 'before each' hook we are skipping the remaining tests in the current suite: 'when login is valid'

The only "javascripty" construct that seems to be allowed is module.exports =.

Desired behavior:

.js fixtures should support valid JS syntax (ES6, preferably).

How to reproduce:

Create a fixture containing valid ES6 syntax

const user = 'Joe'

export default {
  user,
}

Then use it:

  cy.fixture('auth.js')

Result:

Error: 'auth.js' is not a valid JavaScript object.
auth.js:3
export default {
^
ParseError: Unexpected token

Create a fixture using valid ES5 code

var user = 'Joe';

module.exports = {
  user: user
};

Result:

Error: 'auth.js' is not a valid JavaScript object.SyntaxError: Unexpected token var

• Operating System: Darwin Kernel Version 15.6.0: Mon Nov 13 21:58:35 PST 2017; root:xnu-3248.72.11~1/RELEASE_X86_64
• Cypress Version: 1.4.2
• Browser Version: Electron 53, Chrome 64

[brian-mann]

This is true, we likely need to rethink how we handle .js fixtures.

[tomatau]

please fix this

[bensampaio]

any news on this?

[zebulonj]

It'd be lovely if *.js fixtures were simply executed like any normal JavaScript, and they were expected to export the same fixture data that might otherwise be JSON encoded in a *.json fixture. Prime use case: using faker in a .js fixture to generate data.

[sandro-pasquali]

@brian-mann Sincere question: why are .js fixtures not treated as a typical .js files? Is there something about the context in a cy test which precludes that? Just trying to understand, and would love to help fix. Pretty normal (for me at least) to dynamically generate fixtures at runtime via .js. Kinda need this.

[brian-mann]

@sandro-pasquali the reason is that there are two contexts - the browser context and node context.

Because of this, it's not as simple as what you'd expect. Fixtures are utilized inside of the browser, which means you use them like this... cy.fixture('foo.js', arg1, arg2, arg3) right?

That's fine except... how is the foo.jsevaluated? If it's evaluated in the browser context then that fixture file needs to already be part of the bundle that is served along with spec files. That way it could go through the normal spec preprocessor rules so you could use your typescript, webpack modules, etc on it. But wait: how does it become part of the browser bundle if you don't ever require(...) or import it directly in your spec files?

Alternatively, we could evaluate foo.js in the node context. That's possible, but then we run afoul of the same preprocessor rules. It would mean your specs are evaluated with preprocessors but then fixtures aren't. We might could add fixtures to those rules too which would would enable you to use typescript on there, but it really doesn't make sense in cases like with webpack because this foo.js isn't actually being served to the browser.

Another problem with the node context approach is that arguments would have to be JSON serializable. That's probably not that big of a problem but it means you cannot pass functions or instances or even undefined across the wire.

I'm probably more okay with opting to go with the node context approach as opposed to the browser.

There has been some dialog amongst our team to effectively rewrite the entire fixtures approach in Cypress because we feel it's been large superseded by better approaches and initially was sort of a "stop-gap" feature invented years ago.

[brian-mann]

@sandro-pasquali forgot to mention that you can interop between the browser + node context seamlessly with cy.task. You could effectively design or come up with your own fixture implementation without using cy.fixture at all. Just defer to a cy.task, pass in arguments, and then dynamically call into whatever fixture or node.js file you want to do.

This is effectively the approach I described above as the 2nd option. The only downside is that you'll have to write your node code for version 8.2.1 and it will not support typescript at all at the moment

[simonhaenisch]

I'm running into similar issues with something like this:

[
  { /* ... */ },
];

Error: 'notifications' is not a valid JavaScript object. SyntaxError: Unexpected token ;

Removing the trailing semicolon fixes it, however my prettier editor plugin auto-appends it on save.

I was expecting the fixtures to become part of the browser bundle and also tried export default [] first. I see what you mean with having to import them somewhere, however I wonder what the actual issue is with importing them?

This is more like default JS and more flexible anyway (passing the fixture as an object reference):

import notificationsFixture from '../fixtures/notifications';

describe('Notifications', () => {
  it('lists notifications', () => {
    cy.server();
    cy.route('GET', '/api/notifications', notificationsFixture);

    // or
    cy.fixture(notificationsFixture).as('notifications');
    cy.route('GET', '/api/notifications', '@notifications');

    // ...
  });
});

This could even become a backwards-compatible API change (i. e., check whether the fixture is a string or an object)?

Edit: I also don't get auto-reload of my tests when I change a fixture, which could be solved by this as well.

[chochihim]

Maybe we need to update the document to state that js fixture is not what people normally expect.
I am quite surprised that
this fixture works:

module.exports = {
  a: 1
}

but not this (with semicolon automatically added by my editor setting)

module.exports = {
  a: 1
};

This throws Error: 'myFixture' is not a valid JavaScript object.SyntaxError: Unexpected token ;

[szabolcsmaj]

Any news about this? It's really hard to maintain our fixtures since they are quite big with only slight changes here and there. One change in any of them and you have to update all of them.

[bahmutov]

Take a look at cy.task - it can be used to generate any object in node context, including fixture json files that you could load later. Or use cy.writeFile to do the same. Or even JavaScript right from the tests and instead of fixture stub in cy.route use the created object.

Sent from my iPhone

On Jan 27, 2019, at 18:56, SLOBYYYY [e-mail] wrote:

Any news about this? It's really hard to maintain our fixtures since they are quite big with only slight changes here and there. One change in any of them and you have to update all of them.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[younesea]

Thanks @bahmutov for mentioning cy.task.

I just started with Cypress and I wanted to prevent the issue that @SLOBYYYY had. To do that, I created javascript files that exports an object and I get it with the following task:

plugins/index.js

module.exports = (on, config) => {
  on('task', {
    fixture (fixtures) {
      const result = {}

      if (Array.isArray(fixtures)) {
        fixtures.forEach(fixture => {
          result[fixture] = require('../fixtures/elements/' + fixture + '.js')
        })
      } else {
        result[fixtures] = require('../fixtures/elements/' + fixtures + '.js')
      }

      return result
    }
  })

  return config
}

So in your tests you can use it like this

// Getting one fixture
cy.task('fixture', 'user').then(f => {
      console.log(f) // outputs {user: {}}
})

// Getting multiple fixtures
cy.task('fixture', ['user', 'product']).then(f => {
      console.log(f) // outputs { user: {}, product: {]}
})

This way you can also use libraries like faker in your .js files. You can adjust the task so that it fits your project.

[OneHatRepo]

I could not get the task option to work, as my .js fixture files had ES6 imports that were constantly failing. In the end, I just did a standard import of each fixture file at the top of each spec file and then cloned the data in a beforeEach.

import props from '../../../fixtures/Models/Helpers/props';
import _ from 'lodash';

....

    beforeEach(function() {
        cy.then(function() {
            return _.cloneDeep(props);
        }).as('props');
    });

The fixture was then available in each test as this.props.

[liamhubers]

Maybe we need to update the document to state that js fixture is not what people normally expect.
I am quite surprised that
this fixture works:

module.exports = {
  a: 1
}

but not this (with semicolon automatically added by my editor setting)

module.exports = {
  a: 1
};

This throws Error: 'myFixture' is not a valid JavaScript object.SyntaxError: Unexpected token ;

Took me an hour to find :|

[renatoruk]

Maybe we need to update the document to state that js fixture is not what people normally expect.
I am quite surprised that
this fixture works:

module.exports = {
  a: 1
}

but not this (with semicolon automatically added by my editor setting)

module.exports = {
  a: 1
};

This throws Error: 'myFixture' is not a valid JavaScript object.SyntaxError: Unexpected token ;

Took me an hour to find :|

Yep, same here. I actually resorted to having a __fixtures__ directory inside integration/{moduleName} directory. What is the use case for the fixtures you need? I am trying to mock some responses, so for now it seems better to use them directly as a value to cy.route options parameter.

import {response} from "__fixtures__/my-response.js";

cy.route({
  method: "GET", // Route all GET requests
  url: "https://api.my-app.com/**",
  response: response.body,
});

But, I am not really sure will this break something in the future, I haven't researched it fully yet. Does anyone use response mocks like this?

[mesqueeb]

What's the recommended way to import mock data into tests which rendered by triggering a function?
Eg. mockUser() or new Array(100).fill(null).map(mockUser)

Could I just create a TS file that exports these functions that create user mocks and import and execute the function inside cypress tests?

[bahmutov]

Yes you can import or require these functions and call them to generate mock data

Sent from my iPhone

On May 18, 2020, at 22:23, Luca Ban [e-mail] wrote:


What's the recommended way to import mock data into tests which rendered by triggering a function?
Eg. mockUser() or new Array(100).fill(null).map(mockUser)

Could I just create a TS file that exports these functions that create user mocks and import and execute the function inside cypress tests?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[mesqueeb]

@bahmutov thanks for your guidance!
What's the benefit of using fixtures over just importing mock objects directly into your test files ?

[sebastianjung]

@mesqueeb
I think manipulating the imported data in one test will leave the data manipulated in other tests. That's why cloning is important.

I could not get the task option to work, as my .js fixture files had ES6 imports that were constantly failing. In the end, I just did a standard import of each fixture file at the top of each spec file and then cloned the data in a beforeEach.

[sebastianjung]

I could not get the task option to work, as my .js fixture files had ES6 imports that were constantly failing. In the end, I just did a standard import of each fixture file at the top of each spec file and then cloned the data in a beforeEach.

import props from '../../../fixtures/Models/Helpers/props';
import _ from 'lodash';

....

  beforeEach(function() {
      cy.then(function() {
          return _.cloneDeep(props);
      }).as('props');
  });

The fixture was then available in each test as this.props.

@OneHatRepo
I am not able to access the data with this.props. Do i have to be in a specific scope or should i be able to use it within a it() closure?

Does the beforeEach() have to be inside the describe closure or is there any other advice you could possibly give?

Any help is very much appreciated!