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

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

[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));

[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.