fix all tests

package.json

@@ -55,12 +55,12 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
-    "jest": "^27.4.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lerna": "^7.4.1",
     "lerna-changelog": "^2.2.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
-    "react-test-renderer": "^18.1.0",
     "rollup": "^3.9.1",
     "rollup-plugin-string": "^3.0.0",
     "turbo": "^1.5.5"

sandpack-react/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  setupFilesAfterEnv: ["<rootDir>/src/setup.jest.ts"],
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    customExportConditions: [""],
+  },
+  globals: {
+    "process.env.TEST_ENV": "true",
+  },
+};

sandpack-react/package.json

@@ -77,6 +77,9 @@
     "@codesandbox/sandpack-themes": "^2.0.21",
     "@storybook/react": "^7.5.1",
     "@storybook/react-vite": "^7.5.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/react-hooks": "8.0.1",
     "@types/fs-extra": "^5.0.4",
     "@types/glob": "^5.0.35",

sandpack-react/src/components/CodeEditor/CodeEditor.test.tsx

@@ -1,9 +1,9 @@
 /**
  * @jest-environment jsdom
  */
-import { act } from "@testing-library/react-hooks";
+import { act, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
 import React from "react";
-import { create } from "react-test-renderer";
 
 import { SandpackProvider } from "../../";
 
@@ -13,7 +13,7 @@ describe("read-only", () => {
   jest.useFakeTimers();
 
   it("should render the read-only flag", () => {
-    const { root } = create(
+    render(
       <SandpackProvider>
         <SandpackCodeEditor readOnly />
       </SandpackProvider>
@@ -23,13 +23,12 @@ describe("read-only", () => {
       jest.runAllTimers();
     });
 
-    const readOnlyFlag = root.findByProps({ "data-testId": "read-only" });
-
-    expect(readOnlyFlag.props.children).toBe("Read-only");
+    const readOnlyFlag = screen.getByTestId("read-only");
+    expect(readOnlyFlag).toHaveTextContent("Read-only");
   });
 
   it("should not render the read-only flag, when showReadOnly is false", () => {
-    const { root } = create(
+    render(
       <SandpackProvider>
         <SandpackCodeEditor showReadOnly={false} readOnly />
       </SandpackProvider>
@@ -39,12 +38,6 @@ describe("read-only", () => {
       jest.runAllTimers();
     });
 
-    try {
-      root.findByProps({ "data-testId": "read-only" });
-    } catch (err) {
-      expect(err.message).toBe(
-        'No instances found with props: {"data-testId":"read-only"}'
-      );
-    }
+    expect(screen.queryByTestId("read-only")).not.toBeInTheDocument();
   });
 });

sandpack-react/src/components/CodeEditor/CodeMirror.tsx

@@ -183,7 +183,8 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       [decorators]
     );
 
-    const useStaticReadOnly = readOnly && decorators?.length === 0;
+    const useStaticReadOnly =
+      readOnly && (decorators?.length === 0 || decorators === undefined);
 
     React.useEffect(() => {
       if (!wrapper.current || !shouldInitEditor || useStaticReadOnly) {