Skip to content

Commit 6680733

Browse files
serhalpserhalp
committed
feat: support React 19
1 parent f4879c6 commit 6680733

File tree

30 files changed

+322
-56
lines changed

30 files changed

+322
-56
lines changed

‎.circleci/config.yml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -435,6 +435,21 @@ jobs:
435435
test_path: e2e-tests/production-runtime
436436
test_command: CYPRESS_PROJECT_ID=5k8zbj CYPRESS_RECORD_KEY=${CY_CLOUD_PROD_RUNTIME_REACT_18} yarn test && CYPRESS_PROJECT_ID=yvdct2 CYPRESS_RECORD_KEY=${CY_CLOUD_PROD_RUNTIME_OFFLINE_REACT_18} yarn test:offline
437437

438+
e2e_tests_development_runtime_with_react_19:
439+
<<: *e2e-executor
440+
steps:
441+
- e2e-test:
442+
test_path: e2e-tests/development-runtime
443+
react_version: "19.1.1"
444+
445+
e2e_tests_production_runtime_with_react_19:
446+
<<: *e2e-executor
447+
steps:
448+
- e2e-test:
449+
test_path: e2e-tests/production-runtime
450+
test_command: yarn test && yarn test:offline
451+
react_version: "19.1.1"
452+
438453
themes_e2e_tests_development_runtime:
439454
<<: *e2e-executor
440455
steps:
@@ -722,6 +737,10 @@ workflows:
722737
<<: *e2e-test-workflow
723738
- e2e_tests_production_runtime_with_react_18:
724739
<<: *e2e-test-workflow
740+
- e2e_tests_development_runtime_with_react_19:
741+
<<: *e2e-test-workflow
742+
- e2e_tests_production_runtime_with_react_19:
743+
<<: *e2e-test-workflow
725744
- themes_e2e_tests_production_runtime:
726745
<<: *e2e-test-workflow
727746
- themes_e2e_tests_development_runtime:

‎docs/contributing/code-contributions.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,24 @@ If you're adding e2e tests and want to run them against local changes:
6464
- Run `gatsby-dev` inside your specific e2e test directory, for example `e2e-tests/themes/development-runtime`.
6565
- While the previous step is running, open a new terminal window and run `yarn test` in that same e2e test directory.
6666

67+
### Testing with different React versions
68+
69+
To test compatibility with different React versions, you can use the `upgrade-react.js` script to update the React version in a test directory, then run the tests:
70+
71+
```shell
72+
REACT_VERSION=19.0.0 TEST_PATH=e2e-tests/production-runtime node ./scripts/upgrade-react.js
73+
cd e2e-tests/production-runtime
74+
yarn test
75+
```
76+
77+
This will update the `package.json` file in the test directory to use the specified React version. This is useful for:
78+
79+
- Testing React 19 compatibility
80+
- Verifying backwards compatibility with older React versions
81+
- Ensuring features work across React version boundaries
82+
83+
The same approach works for any e2e test directory. The CI system automatically runs e2e tests against both React 18 and React 19 to catch compatibility issues.
84+
6785
### Troubleshooting
6886

6987
At any point during the contributing process the Gatsby team would love to help! For help with a specific problem you can [open an Discussion on GitHub](https://github.com/gatsbyjs/gatsby/discussions/categories/help). Or drop in to [our Discord server](https://gatsby.dev/discord) for general community discussion and support.

‎e2e-tests/react-19-compatibility/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# React 19 Compatibility Test
2+
3+
This directory contains end-to-end tests to verify Gatsby's compatibility with React 19.
4+
5+
## Running the Tests
6+
7+
1. Install dependencies:
8+
9+
```bash
10+
npm install
11+
```
12+
13+
2. Run the tests:
14+
```bash
15+
npm test
16+
```
17+
18+
## Test Cases
19+
20+
1. **Development Server**
21+
22+
- Verifies that the development server starts with React 19
23+
- Tests React 19 state updates and hooks
24+
- Tests error boundaries with React 19
25+
26+
2. **Production Build**
27+
- Verifies that the production build completes successfully with React 19
28+
- Checks for the existence of expected output files
29+
30+
## Dependencies
31+
32+
- React 19.0.0 or later
33+
- React DOM 19.0.0 or later
34+
- Gatsby (linked to local development version)

‎e2e-tests/react-19-compatibility/cypress.config.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { defineConfig } from "cypress"
2+
3+
export default defineConfig({
4+
e2e: {
5+
baseUrl: "http://localhost:8000",
6+
supportFile: false,
7+
},
8+
component: {
9+
devServer: {
10+
framework: "create-react-app",
11+
bundler: "webpack",
12+
},
13+
},
14+
})

‎e2e-tests/react-19-compatibility/cypress/integration/react-19.spec.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/// <reference types="cypress" />
2+
3+
describe("React 19 Compatibility", () => {
4+
beforeEach(() => {
5+
cy.visit("/")
6+
})
7+
8+
it("renders the home page", () => {
9+
cy.get("h1").should("contain", "Gatsby + React 19 Test")
10+
})
11+
12+
it("handles React 19 state updates", () => {
13+
// Initial state
14+
cy.get("p").should("contain", "Count: 0")
15+
16+
// Test state update
17+
cy.get('[data-testid="increment"]').click()
18+
cy.get("p").should("contain", "Count: 1")
19+
})
20+
21+
it("handles React 19 error boundaries", () => {
22+
// Test error boundary
23+
cy.get('[data-testid="error-button"]').click()
24+
cy.get("div").should("contain", "Error: Test error")
25+
})
26+
})

‎e2e-tests/react-19-compatibility/gatsby-config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
siteMetadata: {
3+
title: `Gatsby React 19 Test`,
4+
},
5+
plugins: [],
6+
}

‎e2e-tests/react-19-compatibility/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "gatsby-react-19-compatibility",
3+
"private": true,
4+
"description": "Test React 19 compatibility",
5+
"version": "1.0.0",
6+
"author": "Gatsby Team",
7+
"dependencies": {
8+
"gatsby": "*",
9+
"react": "^19.0.0",
10+
"react-dom": "^19.0.0"
11+
},
12+
"devDependencies": {
13+
"@testing-library/cypress": "^9.0.0",
14+
"cypress": "^12.0.0",
15+
"typescript": "^4.9.5"
16+
},
17+
"keywords": [
18+
"gatsby"
19+
],
20+
"license": "MIT",
21+
"scripts": {
22+
"develop": "gatsby develop",
23+
"build": "gatsby build",
24+
"clean": "gatsby clean",
25+
"serve": "gatsby serve",
26+
"test": "start-server-and-test develop http://localhost:8000 'cypress run'",
27+
"test:watch": "start-server-and-test develop http://localhost:8000 'cypress open'"
28+
},
29+
"engines": {
30+
"node": ">=18.0.0"
31+
}
32+
}

‎e2e-tests/react-19-compatibility/src/pages/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react"
2+
3+
export default function Home() {
4+
// Test React 19 features
5+
const [count, setCount] = React.useState(0)
6+
7+
// Test error boundaries
8+
const [error, setError] = React.useState(null)
9+
10+
if (error) {
11+
// Test error boundaries
12+
return <div>Error: {error.message}</div>
13+
}
14+
15+
return (
16+
<div>
17+
<h1>Gatsby + React 19 Test</h1>
18+
<p>Count: {count}</p>
19+
<button onClick={() => setCount(c => c + 1)} data-testid="increment">
20+
Increment
21+
</button>
22+
<button
23+
onClick={() => setError(new Error("Test error"))}
24+
data-testid="error-button"
25+
>
26+
Trigger Error
27+
</button>
28+
</div>
29+
)
30+
}

‎packages/gatsby-link/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
},
3636
"peerDependencies": {
3737
"@gatsbyjs/reach-router": "^2.0.0",
38-
"react": "^18.0.0 || ^0.0.0",
39-
"react-dom": "^18.0.0 || ^0.0.0"
38+
"react": "^18.0.0 || ^19.0.0 || ^0.0.0",
39+
"react-dom": "^18.0.0 || ^19.0.0 || ^0.0.0"
4040
},
4141
"homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link#readme",
4242
"keywords": [

‎packages/gatsby-plugin-cxs/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
"peerDependencies": {
2929
"cxs": ">=5.0.0",
3030
"gatsby": "^5.0.0-next",
31-
"react": "^18.0.0 || ^0.0.0",
32-
"react-dom": "^18.0.0 || ^0.0.0"
31+
"react": "^18.0.0 || ^19.0.0 || ^0.0.0",
32+
"react-dom": "^18.0.0 || ^19.0.0 || ^0.0.0"
3333
},
3434
"repository": {
3535
"type": "git",

0 commit comments

Comments
 (0)