CODEWITHSUNDEEP
cucumbercypresscypress-cucumber-preprocessorcypress-testing-library
Eric Carlson
Eric Carlson

Reputation: 765

Using testing-library findby* queries with @badeball/cypress-cucumber-preprocessor

I have a react app that I'm trying to test with Cypress using the badeball/cypress-cucumber-preprocessor and testing-library but I'm getting the error

cy.findByRole is not a function

Here's my current setup:

I have created a sample app that demonstrates the issue here

The e2e section of cypress.config.ts has two configurations that can be tested by commenting out one and leaving the other. The first (as it is currently configured) will attempt to run the test as a feature file and will fail. The second configuration uses a normal cypress test and will show that the `testing-library function works correctly there.

The setupNodeEvents() function in cypress.config.ts doesn't exactly follow the webpack/ts example found in the badeball/cypress-cucumber-preprocessor docs because that example doesn't play well with esModuleInterop being set to true which is used in other parts of my app so this configuration is my attempt to make that work. But I did test that example configuration and still couldn't get the testing-library functions to work.

I have the scripts setup so you can use npm test to start cypress in e2e mode.

Any help is appreciated.

Upvotes: 0

Views: 345

Answers (3)

Aladin Spaz
Aladin Spaz

Reputation: 9718

@Tiana is correct, but in addition you have set supportFile: false in configuration, so the import you have in support/commands.ts will never be used.

cypress.config.ts

export default defineConfig({
  ...
  e2e: {
    specPattern: "**/*.feature",

    supportFile: false,        <-- don't do this if you want to use the support file
    setupNodeEvents,
  },
});

Upvotes: 5

Tiana
Tiana

Reputation: 196

Cypress allows you to add common code for each step file by putting it into cypress/support/e2e.js.

If you add import "@testing-library/cypress/add-commands" there, you will get the cy.findByRole() command in every spec.

cypress/support/e2e.js acts like a "header" for every spec. Using the cucumber library on top of Cypress does not remove that facility.

Upvotes: 4

Eric Carlson
Eric Carlson

Reputation: 765

Adding import "@testing-library/cypress/add-commands"; to each of the step files seems to work. Didn't recognize the import from cypress/support/commands.ts.

Upvotes: 0

Related Questions