React 19 (#865)

feat: Add support for React 19

BREAKING CHANGE: To simplify the library maintenance, this major version only support React 19.

Author: imjordanxd

.github/workflows/continuous-integration.yaml

@@ -5,34 +5,17 @@ jobs:
     name: Continuous Integration
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2-beta
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '14'
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v2
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: '20'
+          cache: 'yarn'
       - run: yarn install --frozen-lockfile
       - run: yarn run test
       - run: yarn run lint
       - run: yarn run flow
-      - run: yarn run smoke cjs 15.6.2
-      - run: yarn run smoke esm 15.6.2
-      - run: yarn run smoke cjs 16.7.0
-      - run: yarn run smoke esm 16.7.0
-      - run: yarn run smoke cjs 17.0.2
-      - run: yarn run smoke esm 17.0.2
-      - run: yarn run smoke cjs 18.0.0
-      - run: yarn run smoke esm 18.0.0
-      - run: yarn run smoke cjs 18.1.0
-      - run: yarn run smoke esm 18.1.0
+      - run: yarn run smoke cjs 19.0.0
+      - run: yarn run smoke esm 19.0.0
       - run: yarn run smoke cjs latest
       - run: yarn run smoke esm latest
       - run: yarn run smoke cjs next

package.json

@@ -1,7 +1,8 @@
 {
   "name": "react-element-to-jsx-string",
-  "version": "15.0.0",
+  "version": "16.0.0",
   "description": "Turn a ReactElement into the corresponding JSX string.",
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "browser": "dist/cjs/index.js",
@@ -43,8 +44,9 @@
     "@babel/preset-react": "7.24.1",
     "@commitlint/cli": "8.3.6",
     "@commitlint/config-angular": "8.3.6",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/react": "16.1.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "24.9.0",
     "babel-register": "6.26.0",
@@ -67,9 +69,9 @@
     "lint-staged": "10.5.4",
     "mversion": "2.0.1",
     "prettier": "1.19.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-test-renderer": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-is": "19.0.0",
     "rollup": "2.79.1",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-node-builtins": "2.1.2",
@@ -78,13 +80,13 @@
     "rollup-plugin-sourcemaps": "0.6.3"
   },
   "peerDependencies": {
-    "react": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0",
-    "react-dom": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-is": "^19.0.0"
   },
   "dependencies": {
     "@base2/pretty-print-object": "1.0.2",
-    "is-plain-object": "5.0.0",
-    "react-is": "18.2.0"
+    "is-plain-object": "5.0.0"
   },
   "jest": {
     "setupFilesAfterEnv": [

src/index.spec.js

@@ -5,9 +5,9 @@
 /* @flow */
 
 /* eslint-disable react/no-string-refs */
+/* eslint-disable react/prop-types */
 
 import React, { Fragment, Component } from 'react';
-import { createRenderer } from 'react-test-renderer/shallow';
 import { render, screen } from '@testing-library/react';
 import reactElementToJSXString, { preserveFunctionLineBreak } from './index';
 import AnonymousStatelessComponent from './AnonymousStatelessComponent';
@@ -640,47 +640,6 @@ describe('reactElementToJSXString(ReactElement)', () => {
     );
   });
 
-  it('reactElementToJSXString(decorator(<span />)', () => {
-    function myDecorator(ComposedComponent) {
-      class MyDecorator extends React.Component {
-        render() {
-          return (
-            <div>{React.createElement(ComposedComponent.type, this.props)}</div>
-          );
-        }
-      }
-      MyDecorator.displayName = `${ComposedComponent.name}-Decorated`;
-      return MyDecorator;
-    }
-
-    const NestedSpan = myDecorator(<span />);
-    const renderer = createRenderer();
-    renderer.render(<NestedSpan />);
-    expect(reactElementToJSXString(renderer.getRenderOutput())).toEqual(
-      `<div>
-  <span />
-</div>`
-    );
-  });
-
-  it('reactElementToJSXString(<div>Hello {this.props.name}</div>', () => {
-    /* eslint-disable react/prop-types */
-    class InlineProps extends React.Component {
-      render() {
-        return <div>Hello {this.props.name}</div>;
-      }
-    }
-
-    const renderer = createRenderer();
-    renderer.render(<InlineProps name="John" />);
-    const actualElement = renderer.getRenderOutput();
-    expect(reactElementToJSXString(actualElement)).toEqual(
-      `<div>
-  Hello John
-</div>`
-    );
-  });
-
   it('reactElementToJSXString(<div type={Symbol("test")}/>)', () => {
     expect(reactElementToJSXString(<div type={Symbol('test')} />)).toEqual(
       "<div type={Symbol('test')} />"
@@ -1300,6 +1259,21 @@ describe('reactElementToJSXString(ReactElement)', () => {
 </Context.Provider>`);
   });
 
+  it('should stringify `Context` correctly', () => {
+    const Ctx = React.createContext();
+    const App = () => {};
+
+    expect(
+      reactElementToJSXString(
+        <Ctx value={null}>
+          <App />
+        </Ctx>
+      )
+    ).toEqual(`<Context.Provider value={null}>
+  <App />
+</Context.Provider>`);
+  });
+
   it('should stringify `Contex.Provider` with `displayName` correctly', () => {
     const Ctx = React.createContext();
     Ctx.displayName = 'MyCtx';

src/parser/parseReactElement.js

@@ -61,7 +61,7 @@ const getReactElementDisplayName = (element: ReactElement<*>): string => {
     case isContextConsumer(element):
       return `${element.type._context.displayName || 'Context'}.Consumer`;
     case isContextProvider(element):
-      return `${element.type._context.displayName || 'Context'}.Provider`;
+      return `${element.type.displayName || 'Context'}.Provider`;
     case isLazy(element):
       return 'Lazy';
     case isProfiler(element):
@@ -112,9 +112,6 @@ const parseReactElement = (
   const displayName = displayNameFn(element);
 
   const props = filterProps(element.props, noChildren);
-  if (element.ref !== null) {
-    props.ref = element.ref;
-  }
 
   const key = element.key;
   if (typeof key === 'string' && key.search(/^\./)) {