Trying to get cypress react unit testing working ...
glomotion opened this issue · 8 comments
Hey there.
So i've been slamming my head against a wall for the last 5 hours or so trying to work out how to get this all working.
I've then replicated an internal project's structure and deps, and made it into a public repo in an effort to try and get some help. I know it's going to be some kind of bad configuration problem, but I just cant figure out where.
Could someone please help me understand what i need to do to get cypress react unit testing going within a webpack typescript react project?
https://github.com/glomotion/test-cypress-typescript-react
When trying to run
yarn test:cypress:open
...I always get webpack/typescript related build errors from cypress:
incasse it helps... here is some extra debug info from the console while trying to run with extra webpack debug info:
cypress:webpack stats had error(s) +8s
cypress:webpack errored bundling /Users/timpaul/Library/Application Support/Cypress/cy/production/projects/test-cypress-typescript-react-ffdf18db96b66e8934f9c769081501f9/bundles/src/components/vertical-space/vertical-space.cypress.test.tsx.js Webpack Compilation Error
./src/components/vertical-space/vertical-space.cypress.test.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for /Users/timpaul/Desktop/GIT-Repos/test-cypress-typescript-react/src/components/vertical-space/vertical-space.cypress.test.tsx. +8ms
cypress:webpack - compile finished for /Users/timpaul/Desktop/GIT-Repos/test-cypress-typescript-react/src/components/vertical-space/vertical-space.cypress.test.tsx, initial? true +93ms
Webpack Compilation Error
./src/components/vertical-space/vertical-space.cypress.test.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for /Users/timpaul/Desktop/GIT-Repos/test-cypress-typescript-react/src/components/vertical-space/vertical-space.cypress.test.tsx.
GET /__cypress/tests?p=src/components/vertical-space/vertical-space.cypress.test.tsx 200 8680.292 ms - 431
cypress:webpack finished bundling /Users/timpaul/Library/Application Support/Cypress/cy/production/projects/test-cypress-typescript-react-ffdf18db96b66e8934f9c769081501f9/bundles/cypress/support/index.js +432ms
cypress:webpack - compile finished for /Users/timpaul/Desktop/GIT-Repos/test-cypress-typescript-react/cypress/support/index.js, initial? true +7ms
I am now beginning to suspect it might be a dependency version issue:
// package.json:
...
"cypress-react-unit-test": "^4.16.0",
"cypress": "^5.3.0",
"typescript": "^4.0.3",
"webpack": "^4.44.2",
...
@bahmutov Would you be able to let me know what dependency versions this example was last seen working with?
https://github.com/bahmutov/cypress-react-unit-test/blob/main/examples/sass-and-ts/package.json
this is EXACTLY why I am moving all examples folders to have their own package.json with all dependencies as described in https://glebbahmutov.com/blog/testing-pyramids/ and I need to finish this and factor out the examples/sass-and-ts folder
https://github.com/glomotion/test-cypress-typescript-react
so i've simplified my webpack loaders - and removed ts-loader from the equation (much like the sass-and-ts example).
I keep on getting this plugins crash error:
Error: Callback was already called.
at throwError (/Users/timpaul/Desktop/GIT-Repos/test-cypress-typescript-react/node_modules/neo-async/async.js:16:11)
at /Users/timpaul/Desktop/GIT-Repos/test-cypress-typescript-react/node_modules/neo-async/async.js:2818:7
at processTicksAndRejections (internal/process/task_queues.js:76:11)
my plugins/index.js file is SUPER simple:
// load file preprocessor that comes with this plugin
// https://github.com/bahmutov/cypress-react-unit-test#install
module.exports = (on, config) => {
// from the root of the project (folder with cypress.json file)
config.env.webpackFilename = 'internals/webpack/webpack.cypress.config.js';
require('cypress-react-unit-test/plugins/load-webpack')(on, config);
// IMPORTANT to return the config object
// with the any changed environment variables
return config;
}
@bahmutov - so i'm under pretty extreme time pressure to arrive at a solution for visual unit testing of react components within a project i'm on atm ... and i want soo badly to be able to use cypress to do it (i have loved cypress for a long time now!).
Is there any chance you might take a look at my repo and help me fix cypress/plugins/index.js?
FOUND IT!@!~#$%^!@
the problem was this webpack plugin: new MiniCssExtractPlugin(),
Removing it... fixed the issue!