Fix React 18 versions of the tests

mui · Nov 18, 2024 · e3ad8ce · e3ad8ce
1 parent 08dee2d
commit e3ad8ce
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 16 deletions.
diff --git a/packages/x-charts/src/context/AnimationProvider/useSkipAnimation.test.tsx b/packages/x-charts/src/context/AnimationProvider/useSkipAnimation.test.tsx
@@ -37,16 +37,22 @@ describe('useSkipAnimation', () => {
 
     const errorRef = React.createRef<any>();
 
+    const errorMessage1 = 'MUI X: Could not find the animation ref context.';
+    const errorMessage2 =
+      'It looks like you rendered your component outside of a ChartsContainer parent component.';
+    const errorMessage3 = 'The above error occurred in the <UseSkipAnimation> component:';
+    const expextedError =
+      reactMajor < 19
+        ? [errorMessage1, errorMessage2, errorMessage3]
+        : `${errorMessage1}\n${errorMessage2}`;
+
     expect(() =>
       render(
         <ErrorBoundary ref={errorRef}>
           <UseSkipAnimation />
         </ErrorBoundary>,
       ),
-    ).toErrorDev([
-      'MUI X: Could not find the animation ref context.\nIt looks like you rendered your component outside of a ChartsContainer parent component.',
-      reactMajor < 19 && 'The above error occurred in the <UseSkipAnimation> component:',
-    ]);
+    ).toErrorDev(expextedError);
 
     expect((errorRef.current as any).errors).to.have.length(1);
     expect((errorRef.current as any).errors[0].toString()).to.include(

diff --git a/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx b/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx
@@ -23,16 +23,22 @@ describe('useHighlighted', () => {
 
     const errorRef = React.createRef<any>();
 
+    const errorMessage1 = 'MUI X: Could not find the highlighted ref context.';
+    const errorMessage2 =
+      'It looks like you rendered your component outside of a ChartsContainer parent component.';
+    const errorMessage3 = 'The above error occurred in the <UseHighlighted> component:';
+    const expextedError =
+      reactMajor < 19
+        ? [errorMessage1, errorMessage2, errorMessage3]
+        : `${errorMessage1}\n${errorMessage2}`;
+
     expect(() =>
       render(
         <ErrorBoundary ref={errorRef}>
           <UseHighlighted />
         </ErrorBoundary>,
       ),
-    ).toErrorDev([
-      'MUI X: Could not find the highlighted ref context.\nIt looks like you rendered your component outside of a ChartsContainer parent component.',
-      reactMajor < 19 && 'The above error occurred in the <UseHighlighted> component:',
-    ]);
+    ).toErrorDev(expextedError);
 
     expect((errorRef.current as any).errors).to.have.length(1);
     expect((errorRef.current as any).errors[0].toString()).to.include(

diff --git a/packages/x-charts/src/hooks/useSeries.test.tsx b/packages/x-charts/src/hooks/useSeries.test.tsx
@@ -22,16 +22,22 @@ describe('useSeries', () => {
 
     const errorRef = React.createRef<any>();
 
+    const errorMessage1 = 'MUI X: Could not find the series ref context.';
+    const errorMessage2 =
+      'It looks like you rendered your component outside of a ChartsContainer parent component.';
+    const errorMessage3 = 'The above error occurred in the <UseSeries> component:';
+    const expextedError =
+      reactMajor < 19
+        ? [errorMessage1, errorMessage2, errorMessage3]
+        : `${errorMessage1}\n${errorMessage2}`;
+
     expect(() =>
       render(
         <ErrorBoundary ref={errorRef}>
           <UseSeries />
         </ErrorBoundary>,
       ),
-    ).toErrorDev([
-      'MUI X: Could not find the series ref context.\nIt looks like you rendered your component outside of a ChartsContainer parent component.',
-      reactMajor < 19 && 'The above error occurred in the <UseSeries> component:',
-    ]);
+    ).toErrorDev(expextedError);
 
     expect((errorRef.current as any).errors).to.have.length(1);
     expect((errorRef.current as any).errors[0].toString()).to.include(

diff --git a/packages/x-charts/src/hooks/useSvgRef.test.tsx b/packages/x-charts/src/hooks/useSvgRef.test.tsx
@@ -30,16 +30,22 @@ describe('useSvgRef', () => {
 
     const errorRef = React.createRef<any>();
 
+    const errorMessage1 = 'MUI X: Could not find the svg ref context.';
+    const errorMessage2 =
+      'It looks like you rendered your component outside of a ChartsContainer parent component.';
+    const errorMessage3 = 'The above error occurred in the <UseSvgRef> component:';
+    const expextedError =
+      reactMajor < 19
+        ? [errorMessage1, errorMessage2, errorMessage3]
+        : `${errorMessage1}\n${errorMessage2}`;
+
     expect(() =>
       render(
         <ErrorBoundary ref={errorRef}>
           <UseSvgRef />
         </ErrorBoundary>,
       ),
-    ).toErrorDev([
-      'MUI X: Could not find the svg ref context.\nIt looks like you rendered your component outside of a ChartsContainer parent component.',
-      reactMajor < 19 && 'The above error occurred in the <UseSvgRef> component:',
-    ]);
+    ).toErrorDev(expextedError);
 
     expect((errorRef.current as any).errors).to.have.length(1);
     expect((errorRef.current as any).errors[0].toString()).to.include(

diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx
@@ -32,6 +32,7 @@ describeTreeView<
           reactMajor < 19 &&
             'MUI X: The Tree View component requires all items to have a unique `id` property.',
           reactMajor < 19 && `The above error occurred in the <ForwardRef(TreeItem)> component`,
+          reactMajor < 19 && `The above error occurred in the <ForwardRef(TreeItem)> component`,
         ]);
       } else {
         expect(() =>