How to use initSpecStore method in Cypress

The process you described can surely be tested with react-testing-library as an integrated test. From the docs/faq, it encourages testing a component high enough up the component tree, without mocking child components, in order to simulate and test what an actual user interaction would be like.

Also check out this Kent C. Dodds blog post .

You might want to use the Cypress Module API to invoke cypress run and control the exit code.

This is my script which differs from the docs example slightly,

/scripts/cy-run.js

const cypress = require('cypress')

const args = process.argv.slice(2);
const options = ['cypress', 'run', ...args]; // saves passing 'cypress run' on the command line

cypress.cli.parseRunArguments(options).then(runOptions => {

  console.log('runOptions', runOptions)

  cypress.run(runOptions).then(() => {

    process.exit(0);   // control the exit code 

  }).catch(error => {
    console.error(error);
  })
}).catch(error => {
  console.error(error)
})

package.json

{
  ...
  "scripts": {
    "cyrun": "node scripts/cy-run.js",
    "postcyrun": "echo next command",

sample test

it('succeeds', () => {
  expect(1+1).to.equal(2)
})

it('fails', () => {
  expect(1+1).to.equal(3)
})

command line

yarn cyrun --spec "**/test.spec.js" --browser chrome

console output

node scripts/cy-run.js --spec **/test.spec.js --browser chrome
runOptions { browser: 'chrome', spec: '**/test.spec.js' }


==================================================================================================

  (Run Starting)

  ┌──────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    5.5.0                                                                            │
  │ Browser:    Chrome 86                                                                        │
  │ Specs:      1 found (test.spec.js)                                                           │
  │ Searched:   **\test.spec.js                                                                  │
  └──────────────────────────────────────────────────────────────────────────────────────────────┘

... test details

==================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌──────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ×  test.spec.js                           820ms        2        1        1        -        - │
  └──────────────────────────────────────────────────────────────────────────────────────────────┘
    ×  1 of 1 failed (100%)                   820ms        2        1        1        -        -

$ echo next command
next command          // postcyrun is running
Done in 14.35s.

Basically when you say import file from '../fixtures/filepath/file.json' you can use the imported file in any of methods in the particular javascript file. Whereas if you say cy.fixture(file.json), then the fixture context will remain within that cy.fixture block and you cannot access anywhere/outside of that cy.fixture block. Please go through the below code and you will understand the significance of it.

I recommend to use import file from '../fixtures/filepath/file.json'

For example. Run the below code to understand.

import fixtureFile from './../fixtures/userData.json';
describe('$ suite', () => {
  it('Filedata prints only in cy.fixture block', () => {
    cy.fixture('userData.json').then(fileData => {
      cy.log(JSON.stringify(fileData)); // You can access fileData only in this block.
    })
    cy.log(JSON.stringify(fileData)); //This says error because you are accessing out of cypress fixture context
  })

  it('This will print file data with import', () => {
    cy.log(JSON.stringify(fixtureFile));
  })

  it('This will also print file data with import', () => {
    cy.log(JSON.stringify(fixtureFile));
  })
});

The problem is with these two type defns in cypress.d.ts

// cypress.d.ts

/**
 * Get one or more DOM elements by selector.
 * The querying behavior of this command matches exactly how $(…) works in jQuery.
 * @see https://on.cypress.io/get
 * @example
 *    cy.get('.list>li')    // Yield the <li>'s in <.list>
 *    cy.get('ul li:first').should('have.class', 'active')
 *    cy.get('.dropdown-menu').click()
 */
get<E extends Node = HTMLElement>(
  selector: string, 
  options?: Partial<Loggable & Timeoutable & Withinable & Shadow>)
  : Chainable<JQuery<E>>

/**
 * Get one or more DOM elements by alias.
 * @see https://on.cypress.io/get#Alias
 * @example
 *    // Get the aliased ‘todos’ elements
 *    cy.get('ul#todos').as('todos')
 *    //...hack hack hack...
 *    //later retrieve the todos
 *    cy.get('@todos')
 */
get<S = any>(
  alias: string, 
  options?: Partial<Loggable & Timeoutable & Withinable & Shadow>)
  : Chainable<S>

You can "fix" it by reversing the order,

// cypress/support/index.ts

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      // change the order of these two dfns
      get<S = any>(alias: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<S>
      get<E extends Node = HTMLElement>(selector: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<E>>
    }
  }
}

Now cy.get('@alias') types to any (because of get<S = any>), which is valid since aliases store any type.

But also the selector version is getting typed to any as well, it seems the identical type signatures make one of the defns redundant.

As Mikhail Bolotov points out, a different command name solves the issue, but I would define it as a custom command in /cypress/support/index.ts and call it getAlias since it has to work for any type.

Does this button has different text? if yes, then use

cy.get('.sidebar--button').contains('whatever the text is').click()

as per docs, this should work:

cy.get("#id").type( password, { log: false });

The jQuery .index() method is useful here

Search for a given element from among the matched elements

cy.contains('table thead th', 'Contact')
  .then($th => $th.index())
  .then(contactIndex => {
    cy.get('table tbody td').eq(contactIndex).should('contain', 'Maria Anders')
  })

You should add a cy.get() for something that only appears after the page load is finished,

cy.bookspanel = {
  getBookNavigationTab: function () {
    cy.get('a > span').contains("Books").click();
    cy.contains('h2', 'Heading that displays after page is loaded');  
    // Will not run next command until above heading appears.
  }
}

or pass to the function as a parameter if it changes on each page

cy.bookspanel = {
  getBookNavigationTab: function (myContent) {
    cy.get('a > span').contains("Books").click();
    cy.contains(myContent);  
    // Will not run next command until above content appears.
  }
}

cy.bookspanel.getBookNavigationTab('Heading that displays after page is loaded');

Below

Here comes the human tester that kills the reCaptcha manually IF NEEDED

insert

cy.intercept('POST' , 'https://www.google.com/recaptcha/*').as('googleCaptcha') 
cy.wait('@googleCaptcha').its('response.statusCode').should('eq', 200)