Merge pull request #683 from live-codes/upgrade-testing-library

fix/upgrade testing-library
live-codes · Dec 11, 2024 · ed6208b · ed6208b
2 parents b5fd5e6 + 3f5db40
commit ed6208b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/docs/docs/features/tests.md b/docs/docs/features/tests.md
@@ -143,6 +143,12 @@ import { render, fireEvent, waitFor, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 ```
 
+- <a href="https://testing-library.com/docs/user-event/intro" target="_blank">user-event</a>
+
+```js
+import userEvent from '@testing-library/user-event';
+```
+
 ### Chai
 
 Jest assertions can be used in the tests. However, if you prefer Chai, it can be easily used.
@@ -158,7 +164,7 @@ Usage examples are provided in the starter templates (<a href="pathname:///../?t
 
 :::caution
 
-The test code is added to the result page and run in its context. Please note that script errors (e.g. import or syntax errors) may prevent the tests from loading.
+The test code is added to the result page and runs in its context. Please note that script errors (e.g. import or syntax errors) may prevent the tests from loading.
 
 :::
 

diff --git a/src/livecodes/templates/starter/jest-react-starter.ts b/src/livecodes/templates/starter/jest-react-starter.ts
@@ -56,17 +56,15 @@ export default function App() {
   tests: {
     language: 'tsx',
     content: `
-import { render, fireEvent, waitFor, screen, cleanup } from "@testing-library/react";
+import { render, fireEvent, screen, cleanup } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { assert } from "chai";
 import App, { increment } from "./script";
 
 const renderComponent = () => {
   cleanup();
-  return waitFor(() => {
-    return render(<App />, {
-      container: document.querySelector('#app')
-    });
+  render(<App />, {
+    container: document.querySelector('#app')
   });
 }
 

diff --git a/src/livecodes/toolspane/test-imports.ts b/src/livecodes/toolspane/test-imports.ts
@@ -2,8 +2,14 @@ import { chaiUrl, vendorsBaseUrl } from '../vendors';
 
 export const testImports = {
   react: 'https://esm.sh/react?dev',
+  'react/jsx-runtime': 'https://esm.sh/react/jsx-runtime?dev',
+  'react-dom': 'https://esm.sh/react-dom?dev',
+  'react-dom/client': 'https://esm.sh/react-dom/client?dev',
+  'react-dom/test-utils': 'https://esm.sh/react-dom/test-utils?dev',
   '@testing-library/dom': vendorsBaseUrl + '@testing-library/dom.js',
   '@testing-library/jest-dom': vendorsBaseUrl + '@testing-library/jest-dom.js',
   '@testing-library/react': vendorsBaseUrl + '@testing-library/react.js',
+  '@testing-library/react/pure': vendorsBaseUrl + '@testing-library/react-pure.js',
+  '@testing-library/user-event': vendorsBaseUrl + '@testing-library/user-event.js',
   chai: chaiUrl,
 };
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
@@ -4,7 +4,7 @@ import { modulesService } from './services/modules';
 const { getUrl, getModuleUrl } = modulesService;
 
 export const vendorsBaseUrl = // 'http://127.0.0.1:8081/';
-  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.16.0/dist/');
+  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.17.0/dist/');
 
 export const acornUrl = /* @__PURE__ */ getUrl('acorn@8.12.1/dist/acorn.js');
 
@@ -40,7 +40,7 @@ export const browserJestUrl = /* @__PURE__ */ getUrl(
 
 export const brythonBaseUrl = /* @__PURE__ */ getUrl('brython@3.12.4/');
 
-export const chaiUrl = /* @__PURE__ */ getModuleUrl('chai@5.0.0-alpha.2');
+export const chaiUrl = /* @__PURE__ */ getModuleUrl('chai@5.1.2');
 
 export const cherryCljsBaseUrl = /* @__PURE__ */ getUrl('cherry-cljs@0.2.19/');