Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update system tests and prep for react18 harness removal/upstream merge for component testing #30614

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .circleci/workflows.yml
Original file line number Diff line number Diff line change
Expand Up @@ -1789,7 +1789,7 @@ jobs:
PLATFORM: linux
machine:
# using `machine` gives us a Linux VM that can run Docker
image: ubuntu-2004:202111-02
image: ubuntu-2004:2024.05.1
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

needs to be updated since find-up update in the module-api system test is now on version 7 and cannot be installed with node 16. ubuntu-2004:202111-02 ships with node 16, as ubuntu-2004:2024.05.1 ships with node 20.13.0

docker_layer_caching: true
resource_class: medium
steps:
Expand Down
2 changes: 1 addition & 1 deletion npm/vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
"src/**/*.js"
],
"engines": {
"node": ">=8"
"node": ">=18"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just a missed detail. Cypress requires node 18 and up so this is a non breaking change

},
"types": "dist/index.d.ts",
"license": "MIT",
Expand Down
7 changes: 4 additions & 3 deletions packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@ function loadErrorSpec (options: Options): VerifyFunc {
return createVerify({ fileName: Cypress._.last(filePath.split('/')), hasPreferredIde: false, mode: 'component' })
}

const reactVersions = [17, 18] as const
// keeping structure as to easily adapt for future versions of react
const reactVersions = [18] as const

reactVersions.forEach((reactVersion) => {
describe(`React ${reactVersion}`, {
Expand Down Expand Up @@ -281,12 +282,12 @@ describe.skip('Svelte', {
numTestsKeptInMemory: 1,
}, () => {
beforeEach(() => {
cy.scaffoldProject('svelte-webpack')
cy.scaffoldProject('svelte-webpack-configured')
})

it('error conditions', () => {
const verify = loadErrorSpec({
projectName: 'svelte-webpack',
projectName: 'svelte-webpack-configured',
configFile: 'cypress.config.js',
filePath: 'src/errors.cy.js',
failCount: 4,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const PROJECTS: {projectName: ProjectDirs[number], test: string}[] = [
{ projectName: 'next-14', test: 'index.cy' },
{ projectName: 'vue3-vite-ts-configured', test: 'HelloWorld.cy' },
{ projectName: 'vue3-webpack-ts-configured', test: 'HelloWorld.cy' },
{ projectName: 'svelte-vite', test: 'App.cy' },
{ projectName: 'svelte-vite-configured', test: 'App.cy' },
]

// These are especially flaky on windows, skipping them there.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ describe('packagesToInstall', () => {
it('regular react project with webpack', async () => {
const ctx = createTestDataContext()

const projectPath = await scaffoldMigrationProject('react-app-webpack-5-unconfigured')
const projectPath = await scaffoldMigrationProject('react18-webpack-unconfigured')

ctx.update((coreData) => {
coreData.currentProject = projectPath
Expand Down
4 changes: 2 additions & 2 deletions packages/scaffold-config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ We will also attempt to scaffold a configuration file for projects using React a
| Vue | - | Vite | 4.x, 5.x | Vue 3 | `@cypress/react@latest` | [Link](../../system-tests/projects/vue3-vite-ts-configured) |
| Vue | - | Webpack | 4.x, 5.x | Vue 3 | `@cypress/vue@latest` | [Link](../../system-tests/projects/vue3-webpack-ts-configured) |
| Angular | - | Webpack | 5.x | Angular 17, 18 | `@cypress/angular@latest` | [Link](../../system-tests/projects/angular-cli-configured) |
| Svelte | - | Vite | 4.x, 5.x | Svelte 4 | `@cypress/svelte@latest` | [Link](../../system-tests/projects/svelte-vite) |
| Svelte | - | Webpack | 4.x, 5.x | Svelte 4 | `@cypress/svelte@latest` | [Link](../../system-tests/projects/svelte-webpack) |
| Svelte | - | Vite | 4.x, 5.x | Svelte 4 | `@cypress/svelte@latest` | [Link](../../system-tests/projects/svelte-vite-configured) |
| Svelte | - | Webpack | 4.x, 5.x | Svelte 4 | `@cypress/svelte@latest` | [Link](../../system-tests/projects/svelte-webpack-configured) |
| Next.js | 14.x | Webpack | 4.x, 5.x | React 18 | `@cypress/react@latest` | [Link](../../system-tests/projects/nextjs-configured) |

### Adding More Projects
Expand Down
4 changes: 2 additions & 2 deletions packages/scaffold-config/test/unit/detect.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,10 @@ const resolvedCtFrameworks = CT_FRAMEWORKS.map((x) => resolveComponentFrameworkD

describe('detectFramework', () => {
it('React App with webpack 5', async () => {
const projectPath = await scaffoldMigrationProject('react-app-webpack-5-unconfigured')
const projectPath = await scaffoldMigrationProject('react18-webpack-unconfigured')

fakeDepsInNodeModules(projectPath, [
{ dependency: 'react', version: '16.0.0' },
{ dependency: 'react', version: '18.0.0' },
{ devDependency: 'webpack', version: '5.0.0' },
])

Expand Down
1 change: 0 additions & 1 deletion system-tests/__snapshots__/component_testing_spec.ts.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ exports['React major versions with Webpack executes all of the tests for React v
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: App.cy.jsx (1 of 5)
53 modules
✓ renders hello world
Expand Down
58 changes: 39 additions & 19 deletions system-tests/__snapshots__/webpack_dev_server_fresh_spec.ts.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: port.cy.jsx (1 of 1)
41 modules
✓ ensures we have launched at the overridden port
Expand Down Expand Up @@ -69,9 +68,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: port.cy.jsx (1 of 1)
6 assets
58 modules
webpack x.x.x compiled successfully in xxx ms
✓ ensures we have launched at the overridden port
Expand Down Expand Up @@ -127,7 +123,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: App.cy.jsx (1 of 9)
51 modules
ERROR in ./src/AppCompilationError.cy.jsx
Module build failed (from [..]):
Expand Down Expand Up @@ -173,7 +168,7 @@ SyntaxError: /foo/bar/.projects/webpack4_wds4-react/src/AppCompilationError.cy.j
1 failing
1) An uncaught error was detected outside of a test:
Error: The following error originated from your test code, not from Cypress.
The following error originated from your test code, not from Cypress.
> Module build failed (from [..]):
SyntaxError: /foo/bar/.projects/webpack4_wds4-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
Expand All @@ -190,6 +185,23 @@ When Cypress detects uncaught errors originating from your test code it will aut
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
Error: The following error originated from your test code, not from Cypress.
> Module build failed (from [..]):
SyntaxError: /foo/bar/.projects/webpack4_wds4-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
6 | cy.get('h1').contains('Hello World')
7 | }
> 8 | })
| ^
9 |
[stack trace lines]
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
[stack trace lines]
Expand Down Expand Up @@ -550,9 +562,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: App.cy.jsx (1 of 9)
16 assets
68 modules
ERROR in ./src/AppCompilationError.cy.jsx
Module build failed (from [..]):
SyntaxError: /foo/bar/.projects/webpack5_wds4-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
Expand All @@ -564,7 +573,7 @@ SyntaxError: /foo/bar/.projects/webpack5_wds4-react/src/AppCompilationError.cy.j
9 |
[stack trace lines]
webpack x.x.x compiled with x errors in xxx ms
webpack compiled with 1 error
✓ renders hello world
Expand Down Expand Up @@ -599,7 +608,7 @@ webpack x.x.x compiled with x errors in xxx ms
1 failing
1) An uncaught error was detected outside of a test:
Error: The following error originated from your test code, not from Cypress.
The following error originated from your test code, not from Cypress.
> Module build failed (from [..]):
SyntaxError: /foo/bar/.projects/webpack5_wds4-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
Expand All @@ -616,6 +625,23 @@ When Cypress detects uncaught errors originating from your test code it will aut
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
Error: The following error originated from your test code, not from Cypress.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this error showing up twice in the output?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's the update to babel-loader from from 8 to 9. We usually append the error in the stack output if we can find it, and I think the enhancement there is making it show up

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will that look weird to the user to have it show up twice? Or is this just a system test nuance?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't believe so since this is our default behavior if we can discover a message. My guess is previously there wasn't a message attached with the error and now there is, so we have something to print

> Module build failed (from [..]):
SyntaxError: /foo/bar/.projects/webpack5_wds4-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
6 | cy.get('h1').contains('Hello World')
7 | }
> 8 | })
| ^
9 |
[stack trace lines]
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
[stack trace lines]
Expand Down Expand Up @@ -976,9 +1002,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: App.cy.jsx (1 of 9)
16 assets
72 modules
ERROR in ./src/AppCompilationError.cy.jsx
Module build failed (from [..]):
SyntaxError: /foo/bar/.projects/webpack5_wds5-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
Expand All @@ -990,7 +1013,7 @@ SyntaxError: /foo/bar/.projects/webpack5_wds5-react/src/AppCompilationError.cy.j
9 |
[stack trace lines]
webpack x.x.x compiled with x errors in xxx ms
webpack compiled with 1 error
✓ renders hello world
Expand Down Expand Up @@ -1417,9 +1440,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: port.cy.jsx (1 of 1)
6 assets
62 modules
webpack x.x.x compiled successfully in xxx ms
✓ ensures we have launched at the overridden port
Expand Down Expand Up @@ -1462,7 +1482,7 @@ Your configFile threw an error from: cypress-webpack.config.ts
We stopped running your tests because your config file crashed.
CypressWebpackDevServerError: Incompatible major versions of webpack and webpack-dev-server!
webpack-dev-server major version 5 only works with major versions of webpack 5 - saw webpack-dev-server version 5.0.4.
webpack-dev-server major version 5 only works with major versions of webpack 5 - saw webpack-dev-server version 5.1.0.
If using webpack major version 4, please install webpack-dev-server version 4 to be used with @cypress/webpack-dev-server or upgrade to webpack 5.
[stack trace lines]
`
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default defineConfig({
bundler: 'webpack',
webpackConfig: {
...webpackConfig,
stats: 'minimal',
stats: 'errors-only',
},
},
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { mount } from 'cypress/react'
import { mount } from 'cypress/react18'

import './backgroundColor.css'

Expand Down
6 changes: 0 additions & 6 deletions system-tests/project-fixtures/react/vite.config.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
const { defineConfig } = require('vite')

module.exports = defineConfig({
resolve: {
alias: {
'react': require.resolve('react'),
'react-dom': require.resolve('react-dom'),
},
},
logLevel: 'silent',
})
4 changes: 2 additions & 2 deletions system-tests/projects/coffee-react-interop/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"dependencies": {
"react": "17.0.2",
"react-dom": "17.0.2"
"react": "18.3.1",
"react-dom": "18.3.1"
}
}
34 changes: 13 additions & 21 deletions system-tests/projects/coffee-react-interop/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -14,32 +14,24 @@ loose-envify@^1.1.0:
dependencies:
js-tokens "^3.0.0 || ^4.0.0"

object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==

[email protected]:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
[email protected]:
version "18.3.1"
resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
scheduler "^0.20.2"
scheduler "^0.23.2"

react@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
react@18.3.1:
version "18.3.1"
resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"

scheduler@^0.20.2:
version "0.20.2"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
scheduler@^0.23.2:
version "0.23.2"
resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"devDependencies": {
"typescript": "4.7.3"
"typescript": "5.6.3"
},
"type": "module",
"projectFixtureDirectory": "simple_passing"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
# yarn lockfile v1


typescript@4.7.3:
version "4.7.3"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
typescript@5.6.3:
version "5.6.3"
resolved "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"devDependencies": {
"typescript": "4.7.3"
"typescript": "5.6.3"
},
"projectFixtureDirectory": "simple_passing"
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
# yarn lockfile v1


typescript@4.7.3:
version "4.7.3"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
typescript@5.6.3:
version "5.6.3"
resolved "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"devDependencies": {
"typescript": "4.7.3"
"typescript": "5.6.3"
},
"projectFixtureDirectory": "simple_passing"
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
# yarn lockfile v1


typescript@4.7.3:
version "4.7.3"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
typescript@5.6.3:
version "5.6.3"
resolved "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Typescript versioning

Typescript v4.9.5 is used here as Typescript v5 does NOT support E3 as a target. Once Cypress drops support for TypeScript 4, this project can be removed.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"devDependencies": {
"typescript": "4.7.3"
"typescript": "4.9.5"
},
"projectFixtureDirectory": "simple_passing"
}
Loading