Test react 18

.eslintrc.json

@@ -3,13 +3,19 @@
   "env": {
     "browser": true
   },
+  "parserOptions": {
+    "ecmaVersion": 2022
+  },
+  "globals": {
+    "globalThis": false
+  },
   "rules": {
     "max-len": ["error", { "code": 100, "ignoreComments": true }],
     "react/function-component-definition": [2, {"namedComponents":"arrow-function"}],
     "import/no-extraneous-dependencies": ["error", {
       "devDependencies": [
         "test/**",
-        "karma.conf.js",
+        "karma.conf.cjs",
         "rollup.config.js",
         "examples/rollup.config.js"
       ]

.github/workflows/test.yml

@@ -18,6 +18,7 @@ jobs:
         react-version:
           - ^16.8.0
           - ^17.0.0
+          - ^18.0.0
 
     steps:
       - uses: actions/checkout@v2

karma.conf.cjs

@@ -5,6 +5,7 @@
 
 process.env.NODE_ENV = 'test';
 if (!process.env.CHROME_BIN) process.env.CHROME_BIN = require('puppeteer').executablePath();
+const IS_REACT_18 = parseInt(require('react').version.split('.')[0], 10) >= 18;
 
 module.exports = (config) => {
   const configuration = {
@@ -66,11 +67,14 @@ module.exports = (config) => {
           exclude: 'node_modules/**',
           babelHelpers: 'bundled',
         }),
+        !IS_REACT_18 && require('@rollup/plugin-alias')({
+          entries: { 'react-dom/client': './test/react-dom-client-polyfill.js' },
+        }),
         require('@rollup/plugin-node-resolve').default({
           mainFields: ['module', 'browser', 'main'],
         }),
         require('@rollup/plugin-commonjs')({ include: 'node_modules/**' }),
-      ],
+      ].filter(Boolean),
       output: {
         format: 'iife',
         sourcemap: 'inline',

package.json

@@ -49,6 +49,7 @@
     "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
+    "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-node-resolve": "^13.1.3",

test/index.jsx

@@ -1,14 +1,16 @@
 import { StrictMode, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import { render as reactDomRender } from 'react-dom';
+import { createRoot } from 'react-dom/client'; // eslint-disable-line import/no-unresolved
 import { Simulate, act } from 'react-dom/test-utils';
+import { expect } from 'chai';
 import { spy } from 'sinon';
 import styled from 'styled-components';
 
-import { expect } from 'chai';
-
-import useScrollOnDrag from '../src';
+// https://github.com/import-js/eslint-plugin-import/issues/1649
+// eslint-disable-next-line import/no-unresolved
+import useScrollOnDrag from 'react-scroll-ondrag';
 
-const noop = () => {};
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 const Container = styled.div`
   display: inline-block;
@@ -42,21 +44,27 @@ describe('react-stay-scrolled', () => {
     );
   };
 
-  function render(element, container, cb = noop) {
-    act(() => {
-      ReactDOM.render(
-        (
-          <StrictMode>
-            {element}
-          </StrictMode>
-        ), container,
-        cb,
-      );
-    });
-  }
-
   let root;
 
+  function render(element) {
+    if (createRoot) {
+      const r = createRoot(root);
+      act(() => {
+        r.render(element);
+      });
+    } else {
+      act(() => {
+        reactDomRender(
+          (
+            <StrictMode>
+              {element}
+            </StrictMode>
+          ), root,
+        );
+      });
+    }
+  }
+
   beforeEach(() => {
     root = document.createElement('div');
     document.body.appendChild(root);
@@ -68,7 +76,7 @@ describe('react-stay-scrolled', () => {
 
   describe('general', () => {
     it('should scroll 30px to the right', () => {
-      render(<TestComponent />, root);
+      render(<TestComponent />);
 
       const container = root.firstChild;
 
@@ -98,7 +106,7 @@ describe('react-stay-scrolled', () => {
       const onDragStart = spy();
       const onDragEnd = spy();
 
-      render(<TestComponent onDragStart={onDragStart} onDragEnd={onDragEnd} />, root);
+      render(<TestComponent onDragStart={onDragStart} onDragEnd={onDragEnd} />);
 
       const container = root.firstChild;
 
@@ -131,7 +139,7 @@ describe('react-stay-scrolled', () => {
       const onDragStart = spy();
       const onDragEnd = spy();
 
-      render(<TestComponent onDragStart={onDragStart} onDragEnd={onDragEnd} />, root);
+      render(<TestComponent onDragStart={onDragStart} onDragEnd={onDragEnd} />);
 
       document.body.dispatchEvent(new MouseEvent('mousedown', {
         clientX: 50,

test/react-dom-client-polyfill.js

@@ -0,0 +1 @@
+export const createRoot = undefined; // eslint-disable-line import/prefer-default-export