Error invoking the cy.injectAxe() command with "cypress": "^5.5.0" and "cypress-axe": "^0.10.0"

[FJLopezGarcia]

Hi All,
I am trying to setup Ally in my project but I am getting below error running an initial/simple test:
Do you know where is the issue? is due to Cypress 5? it seems that it is supported based on the documentation.Do you know which with versions runs properly?

Tere you have my configuration and script:

[reintroducing]

Was literally just about to log the same thing. I updated from v0.9.1 to v0.10.0 and got this, only update I made to my dependencies. I'm using Cypress v5.5.0 and v0.9.1 worked perfectly with it. This update breaks it.

[sapegin]

It does work in the example I've added to the repository. Not sure what might be different?

https://github.com/component-driven/cypress-axe/tree/master/cypress

[reintroducing]

@sapegin I'm not sure either. I just tried to set up an easily reproducible scenario using CRA and had no issues. In my case, where I do have the issues, I'm just running cypress against Storybook for a UI library I developed so nothing crazy in terms of setup. I am also using start-server-and-test like you are in the example in that project, but it does not seem to make a difference as I set up the CRA example to do the same thing. I have no clue where the disconnect could be...

[sapegin]

Trying it on one of my projects with Strobyook and TypeScript, and it also works fine.

Do you have Babel or TypeScript or something like that on the project? Maybe the code is transpiled differently somehow...

[FJLopezGarcia]

I am using TypeScript and cucumber to write the Cypress tests. (see above screenshot with my "package.json" file)

[tvararu]

We're experiencing the same issue on Cypress 4.12.0: DFE-Digital/apply-for-teacher-training-tests@44911ed

[sapegin]

@tvararu how can I run it?

[reintroducing]

@sapegin In my case, I believe I have found the source of the issue. It stems from this issue and the need to include the @cypress/browserify-preprocessor as outlined in this comment to fix it. I've attached a stripped down zip file showing this. Just run npm i && npm start after unzipping and you will see the issue show up. If you then go into cypress/plugins/index.js and comment out line 2 and 34, the tests run as expected.

Unfortunately, without that require statement, the other problem shows up thats outlined in that issue for those of us extending browserslist configs. This works fine on the prior (v0.9.1) version of cypress-axe, though.

cypress-axe-issue.zip

[marcobeltempo]

@patheard workaround worked for me
#6 (comment)

[CharlieGreenman]

For the record, the workaround did not work for me, and this is still an issue. Wondering if we can discuss further? I am getting the error that "t is not defined"

UPDATE
Ended up rolling back my packages.

UPDATE 2
This still didn't help. Turns out issue is with webpack configuration all together. Once that was turned off, this no longer became an issue. I hope this helps, and convinced we just have to find the right configs for Webpack as a community.

[townxelliot]

We are also seeing this issue. We've downgraded to 0.9.1 (as mentioned by @reintroducing) and everything is fine. We haven't tried the work-around.

[ricardobarata]

Same issue.

 TypeError: require.resolve is not a function
  at Context.exports.injectAxe (http://localhost:4200/__cypress/tests?p=test/support/index.js:333:25)

Using angular 11
axe-core: 4.1.1
cypress: 6.3.0
cypress-axe: 0.12.0

Update:
After fiddling again with it @patheard workaround did work for me - just make sure

Cypress.Commands.add('injectAxe', () => {
  cy.window({ log: false }).then(window => {
      const axe = require('axe-core/axe.js');
      const script = window.document.createElement('script');
      script.innerHTML = axe.source;
      window.document.head.appendChild(script);
  })
})

is in index.js or the .js file with the code above is referenced in it.

In the end of the day is still a workaround - so we can keep the issue open :)

[brettz9]

Not sure if this was because I was importing my commands file from cypress/support/index.js, but I seemed to need to create a separate injectAxe in the commands file (I creatively renamed to injectAxe2) and call that instead.

[MaciekBaron]

Has anyone worked out what the issue is? I get this problem simply after updating cypress-axe to the latest version, everything works on older versions.

[callumacrae]

Same problem here - tracked it down to adding @cypress/browserify-preprocessor which was added by cypress-cucumber-preprocessor.

Workaround mentioned by @marcobeltempo fixed it: #6 (comment)

[tannerbaum]

This is an incredibly obvious suggestion, but I think there are a fair number of people who throw cypress/support in the .gitignore. It took me I don't know how many hours to realize thats why I was getting this error in the CI.