cypress-react-unit-test doesn't work with React versions above 16.6?

[jordyvandomselaar]

I've cloned this recipe: https://github.com/bahmutov/try-cra-with-unit-test and updated React to version 17, when I do that, I get this error:

⋊> ~/w/try-cra-with-unit-test on master ⨯ npm i                                                                                                                                                                                                                  14:36:48
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.6.0" from [email protected]
npm ERR! node_modules/next
npm ERR!   peerOptional next@"^=8.x" from [email protected]
npm ERR!   node_modules/cypress-react-unit-test
npm ERR!     dev cypress-react-unit-test@"4.17.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/jordyvandomselaar/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jordyvandomselaar/.npm/_logs/2021-02-21T13_36_53_017Z-debug.log
⋊> ~/w/try-cra-with-unit-test on master ⨯     

When I try to use cypress-react-unit-test in a different project, I get

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'mode'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           mode: ...
         }
       })
     ]

[swandogg]

hey @jordyvandomselaar, did you ever find a solution for this bug? I'm seeing the same issue and was wondering if anyone else had some experience with it

[jordyvandomselaar]

Hi,

Unfortunately not, I'm sorry

[swandogg]

No worries! Thanks for the reply!

[lmiller1990]

Hey everyone, sorry for the slow reply!

We just recently our dedicated component testing runner. Blog post.

If you'd just like to get started, I created a repo that has everything working here but it should be easy enough to follow the blog post and set it up for your own project.

It's still in alpha and there are some known caveats (next.js mainly) but I am working on this everyday, so I can help you out if you'd like to give it another try!