Trying to get cypress react unit testing working ...

[glomotion]

Trying to get cypress react unit testing working ...

[bahmutov]

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

[bahmutov]

Nice! Yeah some webpack plugins can wreak havoc

…

Sent from my iPhone

On Oct 14, 2020, at 20:51, tim ***@***.***> wrote:  Closed #486. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[glomotion]

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

[glomotion]

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",
...

[glomotion]

@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

[glomotion]

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;
}

[glomotion]

@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?

[glomotion]

FOUND IT!@!~#$%^!@
the problem was this webpack plugin: new MiniCssExtractPlugin(),
Removing it... fixed the issue!