Trying to get cypress react unit testing working within a ReactBoilerplate repo

Question

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 run cypress open

and then running the single test that appears from the UI...

I always seem to get some kind of 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

package dependency versions:

// package.json:
...
 "engines": {
   "npm": ">=6.14.8",
   "node": ">=12.18.4"
 },
...
"cypress-react-unit-test": "^4.16.0",
"@cypress/webpack-preprocessor": "^5.4.7",
"cypress": "^5.3.0",
"typescript": "^4.0.3",
"webpack": "^4.44.2",
...

Answer 1

原来这只是删除 webpack mini css 加载器的问题。