How to integrate with cypress

[krzysztofpniak]

💬 Question and Help

Hi, I'm trying to integrate fast-check with cypress and it gives me the error shown on the attached screen.

My code looks like:

import React from 'react';
import TextField from '../../src/components/textField';
import fc from 'fast-check';

const textFieldSelector = '[data-testid="city-input"]';

class TypeText {
  constructor(text) {
    this.text = text;
  }
  check = m => true;
  run(m, r) {
    await cy.get(textFieldSelector).type(this.text));
    m.text += this.text;
  }
}

describe('TextField.cy.js', () => {
  it.only('should call onChange', async () => {
    await cy.mount(<TextField title="city" />);

    const allCommands = [
      fc.string({minLength: 1}).map(t => new TypeText(t)),
    ];

    await fc.assert(
      fc.asyncProperty(fc.commands(allCommands, {size: '+1'}), async cmds => {
        const s = () => ({model: {text: ''}, real: {}});
        await fc.asyncModelRun(s, cmds);
      })
    );
  });
});

[dubzzz]

Hey,

So far I've never combined fast-check and cypress together on any project to be able to answer fully to your question.

But from my understanding of how cypress (the e2e part as I don't know anything about the component testing one atm) works, if one do the following:

it('my wonderful it', () => {
  console.log('a');
  cy.get('...').click();
  console.log('b');
  cy.get('...').click();
  console.log('c');
})

When running such code in Cypress (e2e mode at least), the logs will be executed before any get or click even started. In other words, Cypress somehow stacks all the operations and un-pile them one by one when launching the test. And the same happen for describe and it themselves...

You may want to check this previous issue #253, maybe someone found a trick. But from my understanding until we find a way to tell Cypress: this is run 1, stops at it and don't expect to see others. I don't really how to make it work. I was not able to find back the link but someone linked me an async-cypress in the past.

Just a side note:

---  run(m, r) {
+++  async run(m, r) {
       await cy.get(textFieldSelector).type(this.text));
       m.text += this.text;
     }