Cypress_jsontoxlsx_read-xlsx_webpack compilation error

[vikhyathg]

I am working cypress cucumber BDD framework and I am able to run the basic tests. But I am facing issue when I am trying to read the excel file so that it can be converted to JSON and I can use it for further testing.

I am using "cypress": "^12.17.4" version

Error received -
Error: Webpack Compilation Error
Module parse failed: Unexpected token (1:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

index.js contains below code.

const createEsbuildPlugin =
require('@badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
const nodePolyfills =
require('@esbuild-plugins/node-modules-polyfill').NodeModulesPolyfillPlugin
const addCucumberPreprocessorPlugin =
require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin

const xlsx = require('node-xlsx').default;
const fs = require('fs'); // for file
const path = require('path'); //for file path
module.exports = async (on, config) => {
require('cypress-mochawesome-reporter/plugin')(on);
await addCucumberPreprocessorPlugin(on, config) // to allow json to be produced
// To use esBuild for the bundler when preprocessing
on(
'file:preprocessor',
createBundler({
plugins: [nodePolyfills(), createEsbuildPlugin(config)],
})
)
on('task', {
parseXlsx({ filePath }) {
return new Promise((resolve, reject) => {
try {
const jsonData = xlsx.parse(fs.readFileSync(filePath));
resolve(jsonData);
} catch (e) {
reject(e);
}
});
},
});
return config

};

const readXlsx = require('./read-xlsx');

module.exports = (on, config) => {
on('task', {
'readXlsx': readXlsx.read,
// log (message) {
// console.log(message)
// return null
// }
});
};

read-xlsx.js

const fs = require('fs');
const XLSX = require('xlsx');

const read = ({file, sheet}) => {
const buf = fs.readFileSync(file);
const workbook = XLSX.read(buf, { type: 'buffer' });
const rows = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
return rows
}

module.exports = {
read,
}

command.js

Cypress.Commands.add("parseXlsx", (inputFile) => {
return cy.task('parseXlsx', { filePath: inputFile })
});

cypress.config.js

const Module = require('module')

const originalModuleLoad = Module._load

Module._load = function (request, parent, isMain) {
if (request === 'webpack' || request.startsWith('webpack/')) {
const resolvePath = require.resolve(request, {
paths: [__dirname],
})

return originalModuleLoad(resolvePath, parent, isMain)

}

return originalModuleLoad(request, parent, isMain)
}

const { defineConfig } = require('cypress')
const wp = require('@cypress/webpack-preprocessor')

module.exports = defineConfig({
e2e: {
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
supportFile: false,
setupNodeEvents(on, config) {
on('file:preprocessor', wp({
webpackOptions: {
module: {
rules: [
{
test: /.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: 'defaults' }],
],
plugins: ['@babel/plugin-transform-runtime'],
},
},
},
],
},
},
}))
return require('./cypress/plugins/index.js')(on, config)

},
specPattern: ['cypress/e2e/**/*.feature', 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}'],
supportFile: "cypress/support/e2e.js",
reporter: "cypress-mochawesome-reporter",

reporterOptions: {
reportDir: "cypress/reports",
charts: true,
reportPageTitle: "My Test Suite",
embeddedScreenshots: true,
inlineAssets: true
},
"video": true

},
})

Package.json.

devDependencies": {
"@babel/core": "^7.22.20",
"@babel/preset-env": "^7.22.20",
"@badeball/cypress-cucumber-preprocessor": "^18.0.4",
"@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
"@cucumber/cucumber": "^9.4.0",
"@cypress/webpack-preprocessor": "^6.0.0",
"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
"@expo/webpack-config": "^18.1.3",
"babel-loader": "^9.1.3",
"cypress": "^12.17.4",
"cypress-mochawesome-reporter": "^3.5.1",
"cypress-xpath": "^2.0.1",
"node": "^20.5.1",
"node-xlsx": "^0.23.0",
"webpack": "^5.88.2"
},
"dependencies": {
"cucumber-json-report-formatter": "^0.1.4",
"cypress-cucumber-preprocessor": "^4.3.1",
"jsonpath": "^1.1.1",
"xlsx": "^0.19.3"
},
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"step_definitions": "cypress/e2e/",
"html": {
"enabled": true,
"output": "cypress/report.html"
}
}