InjectAxe fails on cy.readFile error when using Cypress Webpack Preprocessor

[mruthh]

I'm seeing the following error when running cy.injectAxe in my Cypress tests:

Timed out retrying after 4000ms: cy.readFile("0764") failed because the file does not exist at the following path:

/home/megan/voicethread/code/frontend/wizard/0764

Because this error occurred during a before each hook we are skipping the remaining tests in the current suite

node_modules/cypress-axe/dist/index.js:16:8
  14 | exports.configureAxe = exports.injectAxe = void 0;
  15 | exports.injectAxe = function () {
> 16 |     cy.readFile(require.resolve('axe-core/axe.min.js')).then(function (source) {
     |        ^
  17 |         return cy.window({ log: false }).then(function (window) {
  18 |             window.eval(source);
  19 |         }); 

require.resolve('axe-core/axe.min.js') seems to evaluate to "0764" instead of the intended JS.

This issue seems to be connected to Cypress's Webpack Preprocessor, which I'm using to handle importing files with absolute path aliases.

const webpack = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
  on('file:preprocessor', webpack({
    webpackOptions: require('@vue/cli-service/webpack.config'),
    watchOptions: {},

    // Add the ability to use aliases like @shared
    resolve: {
      alias: require('../../../../aliases.config').webpack
    }
  }))

  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js'
  })
}

When I remove the on('file:preprocessor') listener from my plugins.js, file, the cy.injectAxe command succeeds.

Node version: 12.13.1
Cypress version: 6.3.0
@cypress/webpack-preprocessor version: 5.5.0

[mruthh]

One thing to mention: I'm running Ubuntu 18.04. My colleagues on Macs are not experiencing this error when running the same code.

[dogriffiths]

I think this is a bug in the injectAxe command when running on webpack.

The command currently looks like this:

export const injectAxe = () => {
	const fileName =
		typeof require?.resolve === 'function'
			? require.resolve('axe-core/axe.min.js')
			: 'node_modules/axe-core/axe.min.js';
	cy.readFile<string>(fileName).then((source) =>
		cy.window({ log: false }).then((window) => {
			window.eval(source);
		})
	);
};

The problem is that require.resolve does not return the path to the module in webpack: it returns the module id, which is a number.

In the injectAxe command, I believe it can be fixed if the code that sets fileName is changed to this:

let fileName =
      typeof require?.resolve === 'function'
          ? require.resolve('axe-core/axe.min.js')
          : 'node_modules/axe-core/axe.min.js';
if (typeof fileName === 'number') {
    fileName = 'node_modules/axe-core/axe.min.js';
}

[ktordoff13]

Would love to see a solution for this since I am using Cucumber with Cypress and I need on('file:preprocessor', cucumber(options));

[ktordoff13]

@dogriffiths I tested your solution and I was able to get past injectAxe but when I try to call checkA11y I get

I'm wondering if there is a bigger issue here. Were you able to successfully call checkA11y and get results?

[dogriffiths]

No. I had a similar issue, but in my case I was able to switch from using web pack (I only needed it for Typescript). Have you tried temporarily switching back to version 0.9.1? I believe that does not have this issue, because it doesn’t make the web pack module assumption.

[ktordoff13]

I installed the latest version of everything and was able to get it to work without modifying the core code. I have a mono repo so I have some other issues but not related to this.

[kevin-donovan-zocdoc]

This is the most popular workaround #6 (comment). However it doesn't quite work in all cases - at least not for me. It does get rid of the original error, but once you call checkA11y it will error out. It's not great, but hardcoding the path and using window.eval worked consistently for me:

Cypress.Commands.add('injectAxe', () => {
    cy.readFile('node_modules/axe-core/axe.min.js').then(source => {
        return cy.window({ log: false }).then(window => {
            window.eval(source);
        });
    });
});

I think the reason the original workaround didn't work is because of some webpack config I have or possibly the script is injected into the wrong window (Cypress has 2 windows, I did find that window.axe was present in one but not the other and checkA11y was looking in the latter window). I could be wrong, but that was the extent of my debugging.

[JamesHenry]

Thank you @kevin-donovan-zocdoc! I had to apply your workaround when working in an Nx monorepo because Nx wires up TypeScript support for you using on('file:preprocessor', preprocessTypescript(config));