How can i manage to use flow in Cypress? - node.js

Question

I want to use Flow in a React application that I test with Cypress I use a web preprocessor plugging with a flow preset. First, I code the preprocessor in ./cypress/plugin/index.js:
const webpack = require('#cypress/webpack-preprocessor')
module.exports = (on) => {
const options = {
// send in the options from your webpack.config.js, so it works the same
// as your app's code
webpackOptions: require('../../webpack.config'),
watchOptions: {}
}
on('file:preprocessor', webpack((options)))
}
Then I install the #cypress/webpack-preprocessor' and the #babel/preset-flow The package.json looks like this:
{
"name": "TimeLogging",
"version": "1.0.0",
"description": "React Time Logging",
"main": "index.js",
"engines": {
"node": "8.11.4",
"npm": "5.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"eslint": "eslint",
"flow": "flow"
},
"author": "CodeMix",
"license": "ISC",
"dependencies": {
"flow-bin": "^0.81.0",
"prop-types": "^15.6.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "^1.1.1"
},
"devDependencies": {
"#babel/preset-flow": "^7.0.0",
"#cypress/webpack-preprocessor": "^3.0.0",
"cypress": "^3.1.0",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"eslint": "^4.19.1",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-cypress": "^2.0.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0"
}
}
> And the webpack.config.js looks like this:
module: {
rules: [
{{
test: /\.(js|jsx?)$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: {
presets: [
'babel-preset-env',
'babel-preset-react',
'babel-preset-flow'
],
},
}],
},
]
}
}
When I exeutes the test in Cypress I get this error:
/cypress/integration/TogableTimerForm.spec.jsx Module build failed
(from
./node_modules/#cypress/webpack-preprocessor/node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only
functions. In
/Users/stein/Development/TimeLogging/TimeLogging/node_modules/babel-preset-flow/lib/index.js
How do I fix this error?

Answer 1

Install these dependencies
yarn:
yarn add --dev #babel/preset-flow #cypress/browserify-preprocessor
npm
npm install --save-dev #babel/preset-flow #cypress/browserify-preprocessor
Add this to your cypress/plugins/index.js
const browserify = require('#cypress/browserify-preprocessor');
module.exports = (on, config) => {
const options = browserify.defaultOptions;
options.browserifyOptions.transform[1][1].presets.push(
'#babel/preset-flow',
);
on('file:preprocessor', browserify(options));
};