chore: upgrade testing library and migrate render-html tests

wjkg · wjkg · commit e4e49670276a · 2025-10-16T18:33:21.000+02:00
diff --git a/.yarn/patches/react-native-accessibility-engine-npm-3.2.0-5709303461.patch b/.yarn/patches/react-native-accessibility-engine-npm-3.2.0-5709303461.patch
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react-native": "^3.10.0",
     "husky": "^6.0.0",
-    "jest": "^26.6.3",
+    "jest": "^29.6.3",
     "prettier": "^2.2.1",
     "typescript": "~4.2.4"
   },
diff --git a/packages/css-processor/package.json b/packages/css-processor/package.json
@@ -42,11 +42,11 @@
     "@babel/runtime": "^7.25.0",
     "@react-native-community/bob": "^0.17.1",
     "@release-it/conventional-changelog": "^2.0.1",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^29.5.13",
     "@types/react": "19.1.1",
     "babel-jest": "^26.6.3",
     "eslint": "^7.25.0",
-    "jest": "^26.6.3",
+    "jest": "^29.6.3",
     "metro-react-native-babel-preset": "^0.66.0",
     "param-case": "^3.0.4",
     "prettier": "^2.2.1",
diff --git a/packages/render-html/jest.config.js b/packages/render-html/jest.config.js
@@ -1,5 +1,11 @@
 module.exports = {
-  ...require('../../jest-config-base'),
+  preset: 'react-native',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'node'],
+  testRegex: 'src/.*\\.test\\.tsx?$',
+  coveragePathIgnorePatterns: ['/node_modules/', '__tests__'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(react-native|react-native-webview|ramda|react-native-render-html|@react-native)/)'
+  ],
   setupFiles: ['<rootDir>/jest/setup.ts'],
   setupFilesAfterEnv: ['<rootDir>/jest/setupAfterEnv.ts']
 };
diff --git a/packages/render-html/jest/setupAfterEnv.ts b/packages/render-html/jest/setupAfterEnv.ts
@@ -1,2 +1,2 @@
-import '@testing-library/jest-native';
-import '@testing-library/jest-native/extend-expect';
+import '@testing-library/jest-native/legacy-extend-expect';
+import 'react-native-accessibility-engine';
diff --git a/packages/render-html/package.json b/packages/render-html/package.json
@@ -48,19 +48,19 @@
     "@microsoft/api-extractor": "^7.14.0",
     "@react-native/babel-preset": "^0.82.0",
     "@release-it/conventional-changelog": "^2.0.1",
-    "@testing-library/jest-native": "^4.0.2",
+    "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-hooks": "^7.0.0",
-    "@testing-library/react-native": "^7.2.0",
-    "@types/jest": "^26.0.23",
-    "@types/react-test-renderer": "^17.0.1",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.13",
+    "@types/react-test-renderer": "^19.1.0",
     "babel-jest": "^27.0.2",
     "eslint": "^7.29.0",
     "htmlparser2": "^7.1.2",
-    "jest": "^27.0.4",
+    "jest": "^29.6.3",
     "prettier": "^2.3.1",
     "react": "19.1.1",
     "react-native": "^0.82.0",
-    "react-native-accessibility-engine": "^0.4.1",
+    "react-native-accessibility-engine": "patch:react-native-accessibility-engine@npm%3A3.2.0#~/.yarn/patches/react-native-accessibility-engine-npm-3.2.0-5709303461.patch",
     "react-native-builder-bob": "^0.18.1",
     "react-performance-testing": "^1.2.3",
     "react-test-renderer": "19.1.1",
diff --git a/packages/render-html/src/__tests__/__snapshots__/component.render-html.test.tsx.snap b/packages/render-html/src/__tests__/__snapshots__/component.render-html.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RenderHTML regarding customHTMLElementsModels prop should support changing block content model to mixed 1`] = `
-"<TDocument tagName=\\"html\\">
-  <TBlock tagName=\\"body\\">
+"<TDocument tagName="html">
+  <TBlock tagName="body">
     <TPhrasing anonymous>
-      <TPhrasing tagName=\\"span\\">
-        <TText tagName=\\"article\\" data=\\"\\" />
-        <TText anonymous data=\\"Text\\" />
+      <TPhrasing tagName="span">
+        <TText tagName="article" data="" />
+        <TText anonymous data="Text" />
       </TPhrasing>
     </TPhrasing>
   </TBlock>
diff --git a/packages/render-html/src/__tests__/component.render-html-a11y.test.tsx b/packages/render-html/src/__tests__/component.render-html-a11y.test.tsx
@@ -5,7 +5,6 @@ import {
   TBlock
 } from '@native-html/transient-render-engine';
 import { render } from '@testing-library/react-native';
-import AccessibilityEngine from 'react-native-accessibility-engine';
 import RenderHTML from '../RenderHTML';
 import { CustomRendererProps } from '../shared-types';
 
@@ -14,9 +13,9 @@ describe('RenderHTML a11y', () => {
     describe('should add accessibility features to anchors when href is non-empty', () => {
       const snippets = [
         // Block
-        `<a href="https://domain.com">test</a>`,
+        '<a href="https://domain.com">test</a>',
         // Inline
-        `<span><a href="https://domain.com">test</a> other text</span>`
+        '<span><a href="https://domain.com">test</a> other text</span>'
       ];
       for (const snippet of snippets) {
         it(`should pas snippet "${snippet}"`, () => {
@@ -33,15 +32,15 @@ describe('RenderHTML a11y', () => {
           const anchor = getByTestId('a');
           expect(anchor).toHaveProp('accessibilityRole', 'link');
           expect(anchor).toHaveProp('accessible', true);
-          expect(() => AccessibilityEngine.check(element)).not.toThrow();
+          expect(element).toBeAccessible();
         });
       }
     });
     it('should not add accessibility features to anchors when href is empty', () => {
       const element = (
         <RenderHTML
           source={{
-            html: `<a href="">test</a>`
+            html: '<a href="">test</a>'
           }}
           debug={false}
           contentWidth={0}
@@ -51,7 +50,7 @@ describe('RenderHTML a11y', () => {
       const anchor = getByTestId('a');
       expect(anchor).not.toHaveProp('accessibilityRole');
       expect(anchor).not.toHaveProp('accessible');
-      expect(() => AccessibilityEngine.check(element)).not.toThrow();
+      expect(element).toBeAccessible();
     });
   });
   describe('regarding headings', () => {
@@ -68,7 +67,7 @@ describe('RenderHTML a11y', () => {
         );
         const { getByTestId } = render(element);
         expect(getByTestId(header)).toHaveProp('accessibilityRole', 'header');
-        expect(() => AccessibilityEngine.check(element)).not.toThrow();
+        expect(element).toBeAccessible();
       }
     });
   });
@@ -83,9 +82,9 @@ describe('RenderHTML a11y', () => {
           contentWidth={200}
         />
       );
-      const { getByA11yRole, findByTestId } = render(element);
+      const { getByTestId, findByTestId } = render(element);
       await findByTestId('image-success');
-      const image = getByA11yRole('image');
+      const image = getByTestId('img');
       expect(image).toHaveProp('accessibilityRole', 'image');
       expect(image).toHaveProp('accessibilityLabel', 'An image');
 
@@ -143,10 +142,10 @@ describe('RenderHTML a11y', () => {
           contentWidth={200}
         />
       );
-      const { getByA11yRole } = render(element);
-      const button = getByA11yRole('button');
+      const { getByRole } = render(element);
+      const button = getByRole('button');
       expect(button).toHaveProp('accessibilityRole', 'button');
-      expect(() => AccessibilityEngine.check(element)).not.toThrow();
+      expect(element).toBeAccessible();
     });
     it('should add a button role if onPress is defined for custom renderers with a textual content model', () => {
       const element = (
@@ -170,10 +169,10 @@ describe('RenderHTML a11y', () => {
           contentWidth={200}
         />
       );
-      const { getByA11yRole } = render(element);
-      const button = getByA11yRole('link');
+      const { getByRole } = render(element);
+      const button = getByRole('link');
       expect(button).toHaveProp('accessibilityRole', 'link');
-      expect(() => AccessibilityEngine.check(element)).not.toThrow();
+      expect(element).toBeAccessible();
     });
   });
 });
diff --git a/packages/render-html/src/__tests__/component.render-html.test.tsx b/packages/render-html/src/__tests__/component.render-html.test.tsx
@@ -72,22 +72,25 @@ describe('RenderHTML', () => {
           contentWidth={contentWidth}
         />
       );
-      expect(UNSAFE_getByType(ImgTag)).toHaveProp('contentWidth', contentWidth);
+      expect(UNSAFE_getByType(ImgTag)).legacy_toHaveProp(
+        'contentWidth',
+        contentWidth
+      );
       update(
         <RenderHTML
           source={{ html: '<img src="https://img.com/1" />' }}
           debug={false}
           contentWidth={nextContentWidth}
         />
       );
-      expect(UNSAFE_getByType(ImgTag)).toHaveProp(
+      expect(UNSAFE_getByType(ImgTag)).legacy_toHaveProp(
         'contentWidth',
         nextContentWidth
       );
     });
 
     it('should merge `viewStyle` to <img> renderer', () => {
-      const { getByA11yRole } = render(
+      const { getByTestId } = render(
         <RenderHTML
           source={{
             html: '<img alt="An image" src="https://img.com/1" />'
@@ -101,7 +104,7 @@ describe('RenderHTML', () => {
           contentWidth={200}
         />
       );
-      expect(getByA11yRole('image')).toHaveStyle({
+      expect(getByTestId('img')).toHaveStyle({
         backgroundColor: 'red'
       });
     });
@@ -887,7 +890,7 @@ describe('RenderHTML', () => {
           enableExperimentalBRCollapsing
         />
       );
-      expect(queryByText('\n')).toBeNull();
+      expect(queryByText('\n', { normalizer: (s) => s })).toBeNull();
     });
   });
 });
diff --git a/packages/render-html/src/__tests__/regression.118.white-space-handling.test.tsx b/packages/render-html/src/__tests__/regression.118.white-space-handling.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import RenderHTML from '../RenderHTML';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 import { extractTextFromInstance } from './utils';
 
 beforeAll(() => {
@@ -12,7 +12,7 @@ beforeAll(() => {
  */
 describe('RenderHTML component', () => {
   it('should pass regression #118 regarding handling of CSS white-space', () => {
-    const testRenderer = renderer.create(
+    const testRenderer = render(
       <RenderHTML
         debug={false}
         source={{ html: '  <div>  foo\n\nbar  baz  </div>' }}
diff --git a/packages/render-html/src/__tests__/regression.141.custom-blur-image.test.tsx b/packages/render-html/src/__tests__/regression.141.custom-blur-image.test.tsx
@@ -17,7 +17,7 @@ describe('HTMLImageElement component should pass regression test #141', () => {
     const imageLayout = queryByTestId('image-success');
     expect(imageLayout).toBeFalsy();
     await expect(
-      findByTestId('image-success', { timeout: 100 })
+      findByTestId('image-success', {}, { timeout: 100 })
     ).resolves.toBeTruthy();
   });
 });
diff --git a/packages/render-html/src/__tests__/regression.384.html-bloated-image.test.tsx b/packages/render-html/src/__tests__/regression.384.html-bloated-image.test.tsx
@@ -16,7 +16,7 @@ describe('RenderHTML component', () => {
         />
       );
       const image = UNSAFE_getByType(IMGElement);
-      expect(image).not.toHaveProp('renderers');
+      expect(image).not.legacy_toHaveProp('renderers');
     });
   });
 });
diff --git a/packages/render-html/src/__tests__/regression.408.img-url-two-forward-slashes.test.tsx b/packages/render-html/src/__tests__/regression.408.img-url-two-forward-slashes.test.tsx
@@ -19,7 +19,7 @@ describe('RenderHTML component', () => {
         />
       );
       const image = UNSAFE_getByType(IMGElement);
-      expect(image).toHaveProp('source', { uri: 'https://domain.com/' });
+      expect(image).legacy_toHaveProp('source', { uri: 'https://domain.com/' });
     });
   });
 });
diff --git a/packages/render-html/src/__tests__/w3c.css.white-space.test.tsx b/packages/render-html/src/__tests__/w3c.css.white-space.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import RenderHTML from '../RenderHTML';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 import { extractTextFromInstance } from './utils';
 
 beforeAll(() => {
@@ -11,7 +11,7 @@ function testCollapseRuleForCharacter(character: string, name: string) {
   const action =
     character === ' ' ? 'preserves a space' : `replaces ${name} with a space`;
   it(`collapses whitespaces when first text tag has a trailing ${name} and the second starts with a ${name}`, () => {
-    const testRenderer = renderer.create(
+    const testRenderer = render(
       <RenderHTML
         debug={false}
         source={{
@@ -23,7 +23,7 @@ function testCollapseRuleForCharacter(character: string, name: string) {
     expect(renderedText).toEqual('foo bar');
   });
   it(`${action} when the first text tag has a trailing ${name} and the second doesn't contain any`, () => {
-    const testRenderer = renderer.create(
+    const testRenderer = render(
       <RenderHTML
         debug={false}
         source={{ html: `<b>bold${character}</b><span>text</span>` }}
@@ -33,7 +33,7 @@ function testCollapseRuleForCharacter(character: string, name: string) {
     expect(renderedText).toEqual('bold text');
   });
   it(`${action} between two inline elements which don't contain ${name}s and are separated with a ${name}`, () => {
-    const testRenderer = renderer.create(
+    const testRenderer = render(
       <RenderHTML
         debug={false}
         source={{ html: `<b>bold</b>${character}<span>text</span>` }}
diff --git a/packages/render-html/src/__tests__/w3c.html.pre.test.tsx b/packages/render-html/src/__tests__/w3c.html.pre.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import RenderHTML from '../RenderHTML';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 import { extractTextFromInstance } from './utils';
 
 describe('RenderHTML component regarding <pre> tags behaviors', () => {
   it('preserves tabs and line breaks', () => {
-    const testRenderer = renderer.create(
+    const testRenderer = render(
       <RenderHTML debug={false} source={{ html: '<pre>\t\n  a</pre>' }} />
     );
     const renderedText = extractTextFromInstance(testRenderer.root);
@@ -19,7 +19,7 @@ describe('RenderHTML component regarding <pre> tags behaviors', () => {
       console.log("let's go");
     }
     `;
-    const testRenderer = renderer.create(
+    const testRenderer = render(
       <RenderHTML debug={false} source={{ html: `<pre>${preContent}</pre>` }} />
     );
     const renderedText = extractTextFromInstance(testRenderer.root);
diff --git a/packages/render-html/src/elements/ListElement.tsx b/packages/render-html/src/elements/ListElement.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet, View } from 'react-native';
+import { DimensionValue, StyleSheet, View } from 'react-native';
 import React from 'react';
 import { TBlock, TNode } from '@native-html/transient-render-engine';
 import { MarkedListItem, useMarkedList } from '@jsamr/react-native-li';
@@ -49,7 +49,7 @@ function extractMarkerTextStyle(tnode: TNode) {
 
 export function getMarkerBoxStyle(
   markerWidth: number | false,
-  paddingValue: string | number | undefined
+  paddingValue: DimensionValue | undefined
 ) {
   const markerBoxWidth =
     typeof markerWidth === 'number'
diff --git a/packages/render-html/src/elements/__tests__/IMGElement.test.tsx b/packages/render-html/src/elements/__tests__/IMGElement.test.tsx
@@ -36,7 +36,7 @@ describe('IMGElement', () => {
         } as NativeSyntheticEvent<ImageErrorEventData>
       )
     );
-    await findByTestId('image-error', { timeout: 50 });
+    await findByTestId('image-error', {}, { timeout: 50 });
   });
   describe('object-fit support', () => {
     const defaultRM = 'cover' as const;
@@ -71,7 +71,7 @@ describe('IMGElement', () => {
         );
         const image = await findByTestId('image-success');
         expect(image).toHaveStyle({
-          resizeMode
+          resizeMode: resizeMode ?? undefined
         });
       });
     }
diff --git a/packages/render-html/src/elements/__tests__/useIMGElementState.test.ts b/packages/render-html/src/elements/__tests__/useIMGElementState.test.ts
@@ -3,6 +3,7 @@ import { renderHook } from '@testing-library/react-hooks';
 import { perf, wait } from 'react-performance-testing';
 import useIMGElementState from '../useIMGElementState';
 import { Image } from 'react-native';
+import { waitFor } from '@testing-library/react-native';
 
 describe('useIMGElementState', () => {
   const props = {
@@ -50,11 +51,8 @@ describe('useIMGElementState', () => {
     });
   });
   it('should update to success state with dimensions set to scaled physical image dimensions', async () => {
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useIMGElementState(props)
-    );
-    await waitForNextUpdate();
-    expect(result.current.type).toEqual('success');
+    const { result } = renderHook(() => useIMGElementState(props));
+    await waitFor(() => expect(result.current.type).toEqual('success'));
     expect(result.current.dimensions).toMatchObject({
       width: 300,
       height: 150
diff --git a/packages/transient-render-engine/package.json b/packages/transient-render-engine/package.json
@@ -43,11 +43,11 @@
     "@react-native-community/bob": "^0.17.1",
     "@release-it/conventional-changelog": "^2.0.1",
     "@tsconfig/react-native": "^1.0.3",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^29.5.13",
     "babel-jest": "^26.6.3",
     "dom-serializer": "^1.3.2",
     "eslint": "^7.25.0",
-    "jest": "^26.6.3",
+    "jest": "^29.6.3",
     "metro-react-native-babel-preset": "^0.66.0",
     "prettier": "^2.2.1",
     "react": "19.1.1",
diff --git a/packages/transient-render-engine/src/tree/__tests__/__snapshots__/TNode.test.ts.snap b/packages/transient-render-engine/src/tree/__tests__/__snapshots__/TNode.test.ts.snap
diff --git a/packages/transient-render-engine/src/tree/__tests__/__snapshots__/markersPrototype.test.ts.snap b/packages/transient-render-engine/src/tree/__tests__/__snapshots__/markersPrototype.test.ts.snap
diff --git a/packages/transient-render-engine/src/tree/__tests__/__snapshots__/tnodeSnapshot.test.ts.snap b/packages/transient-render-engine/src/tree/__tests__/__snapshots__/tnodeSnapshot.test.ts.snap
diff --git a/yarn.lock b/yarn.lock
