test: Fix re-rendering when a rendererWithFoo function is used

Author: bjoernricks

src/web/testing/Render.tsx

@@ -118,38 +118,37 @@ export const rendererWith = ({
   };
 };
 
-export const rendererWithTable = (options: RendererOptions = {}) => {
-  const {render, ...other} = rendererWith(options);
-  return {
-    ...other,
-    render: (element: React.ReactNode) =>
-      render(
-        <table>
-          <tbody>{element}</tbody>
-        </table>,
-      ),
+export const rendererWithComponent =
+  (Component: React.ComponentType<{children: React.ReactNode}>) =>
+  (options: RendererOptions = {}) => {
+    const {render, ...other} = rendererWith(options);
+    return {
+      ...other,
+      render: (element: React.ReactNode) => {
+        const {rerender, ...rest} = render(<Component>{element}</Component>);
+        return {
+          rerender: (updatedElement: React.ReactNode) =>
+            rerender(<Component>{updatedElement}</Component>),
+          ...rest,
+        };
+      },
+    };
   };
-};
 
-export const rendererWithTableRow = (options: RendererOptions = {}) => {
-  const {render, ...other} = rendererWith(options);
-  return {
-    ...other,
-    render: (element: React.ReactNode) =>
-      render(
-        <table>
-          <tbody>
-            <tr>{element}</tr>
-          </tbody>
-        </table>,
-      ),
-  };
-};
+export const rendererWithTable = rendererWithComponent(({children}) => (
+  <table>
+    <tbody>{children}</tbody>
+  </table>
+));
 
-export const rendererWithTableFooter = (options: RendererOptions = {}) => {
-  const {render, ...other} = rendererWith(options);
-  return {
-    ...other,
-    render: (element: React.ReactNode) => render(<table>{element}</table>),
-  };
-};
+export const rendererWithTableRow = rendererWithComponent(({children}) => (
+  <table>
+    <tbody>
+      <tr>{children}</tr>
+    </tbody>
+  </table>
+));
+
+export const rendererWithTableFooter = rendererWithComponent(({children}) => (
+  <table>{children}</table>
+));