Adding cra-v3 breaks integration test type assertions #302
Description
Interesting issue I'm having:
I have a create-react-app typescript project that is not ejected.
I have integration tests in cypress/integration as .ts files, and I have my component test in the src directory paired with the component as a .tsx file.
My node version: v12.16.1.
My package.json versions:
"@types/node": "^14.0.13",
"@babel/core": "^7.8.6",
"@cypress/browserify-preprocessor": "^3.0.0",
"@cypress/code-coverage": "^3.8.1",
"@cypress/instrument-cra": "^1.1.1",
"cypress": "^4.8.0",
"cypress-react-unit-test": "^4.7.1",
"istanbul-lib-coverage": "^3.0.0",
"babel-plugin-istanbul": "^6.0.0",
"browserify-istanbul": "^3.0.1",
"react-scripts": "3.4.0",
"react": "^16.13.0",
"node-sass": "^4.13.1",
"typescript": "^3.8.2"
My start script for the app is "start": "react-scripts -r @cypress/instrument-cra start",.
My .babelrc file is:
{
"presets": ["@babel/react", "@babel/preset-env"],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
My top level tsconfig.json file is:
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": [
"es6",
"dom",
"dom.iterable",
"esnext"
],
"jsx": "preserve",
"moduleResolution": "node",
"rootDir": "src",
"sourceMap": true,
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"noImplicitReturns": false,
"noImplicitThis": false,
"noImplicitAny": false,
"importHelpers": false,
"strictNullChecks": false,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": false,
"allowUnusedLabels": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
],
"include": [
"src/*.tsx",
"cypress/*.{ts,tsx}"
]
}
I have a cypress/tsconfig.json:
{
"extends": "../tsconfig",
"compilerOptions": {
"baseUrl": "../node_modules",
"target": "es5",
"types": ["cypress"]
},
"include": [
"**/*.ts"
]
}
My cypress.json config:
{
"baseUrl": "http://localhost:3000",
"viewportWidth": 1500,
"viewportHeight": 990,
"video": false,
"experimentalComponentTesting": true,
"testFiles": "**/*spec.{ts,tsx}",
"nodeVersion": "system",
"componentFolder": "src"
}
My cypress/support file:
import 'cypress-react-unit-test/support';
import './commands'
My cypress/plugins file:
module.exports = (on, config) => {
require('cypress-react-unit-test/plugins/cra-v3')(on, config);
config.ignoreTestFiles = "**/examples/*.spec.js";
return config;
};
Prior to refactoring to use cypress-react-unit-test, my integration tests were building and had coverage, and as you might expect, my unit test was broken.
After refactoring to the above configuration, my unit test loads fine with coverage.
My integration tests have an issue:
If I have a file with type assertions, the spec file does not load and throws:
Error: Webpack Compilation Error
./cypress/integration/test.cy-spec.ts 5:6
Module parse failed: Unexpected token (5:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| class CustomDataTransfer {
> data: any;
| types: any[];
| files: any[];
@ multi ./cypress/integration/test.cy-spec.ts main[0]
Any ideas here? Let me know if you need anymore information.