ensure rerenderAsync and unmountAsync called after renderAsync

Author: mdjastrzebski

src/__tests__/act.test.tsx

@@ -23,10 +23,10 @@ test('render should trigger useEffect', () => {
   expect(effectCallback).toHaveBeenCalledTimes(1);
 });
 
-test('update should trigger useEffect', () => {
+test('rerender should trigger useEffect', () => {
   const effectCallback = jest.fn();
   render(<UseEffect callback={effectCallback} />);
-  screen.update(<UseEffect callback={effectCallback} />);
+  screen.rerender(<UseEffect callback={effectCallback} />);
 
   expect(effectCallback).toHaveBeenCalledTimes(2);
 });

src/__tests__/render-async.test.tsx

@@ -64,57 +64,53 @@ test('renderAsync supports legacy rendering option', async () => {
   expect(screen.root).toBeOnTheScreen();
 });
 
-test('update function updates component synchronously', async () => {
-  const fn = jest.fn();
-  const result = await renderAsync(<Banana onUpdate={fn} />);
-
-  result.update(<Banana onUpdate={fn} />);
+test('rerender function throws error when used with renderAsync', async () => {
+  const result = await renderAsync(<Banana />);
 
-  expect(fn).toHaveBeenCalledTimes(1);
+  expect(() => result.rerender(<Banana />)).toThrowErrorMatchingInlineSnapshot(
+    `"\`rerender(...)\` is not supported when using \`renderAsync\` use \`await rerenderAsync(...)\` instead"`
+  );
 });
 
-test('updateAsync function updates component asynchronously', async () => {
+test('rerenderAsync function updates component asynchronously', async () => {
   const fn = jest.fn();
   const result = await renderAsync(<Banana onUpdate={fn} />);
-
-  await result.updateAsync(<Banana onUpdate={fn} />);
-
+  expect(fn).toHaveBeenCalledTimes(0);
+  
+  await result.rerenderAsync(<Banana onUpdate={fn} />);
   expect(fn).toHaveBeenCalledTimes(1);
 });
 
-test('rerender is an alias for update', async () => {
-  const fn = jest.fn();
-  const result = await renderAsync(<Banana onUpdate={fn} />);
-
-  result.rerender(<Banana onUpdate={fn} />);
+test('rerender function throws error when used with renderAsync', async () => {
+  const result = await renderAsync(<Banana />);
 
-  expect(fn).toHaveBeenCalledTimes(1);
+  expect(() => result.rerender(<Banana />)).toThrowErrorMatchingInlineSnapshot(
+    `"\`rerender(...)\` is not supported when using \`renderAsync\` use \`await rerenderAsync(...)\` instead"`
+  );
 });
 
-test('rerenderAsync is an alias for updateAsync', async () => {
+test('rerenderAsync function updates component asynchronously', async () => {
   const fn = jest.fn();
   const result = await renderAsync(<Banana onUpdate={fn} />);
-
+  expect(fn).toHaveBeenCalledTimes(0);
+  
   await result.rerenderAsync(<Banana onUpdate={fn} />);
-
   expect(fn).toHaveBeenCalledTimes(1);
 });
 
-test('unmount function unmounts component synchronously', async () => {
-  const fn = jest.fn();
-  const result = await renderAsync(<Banana onUnmount={fn} />);
-
-  result.unmount();
+test('unmount function throws error when used with renderAsync', async () => {
+  const result = await renderAsync(<Banana />);
 
-  expect(fn).toHaveBeenCalled();
+  expect(() => result.unmount()).toThrowErrorMatchingInlineSnapshot(
+    `"\`unmount()\` is not supported when using \`renderAsync\` use \`await unmountAsync()\` instead"`
+  );
 });
 
 test('unmountAsync function unmounts component asynchronously', async () => {
   const fn = jest.fn();
   const result = await renderAsync(<Banana onUnmount={fn} />);
 
   await result.unmountAsync();
-
   expect(fn).toHaveBeenCalled();
 });
 

src/render-async.tsx

@@ -62,12 +62,12 @@ function buildRenderResult(
 ) {
   const instance = renderer.root;
 
-  const update = function (component: React.ReactElement) {
+  const rerender = function (component: React.ReactElement) {
     throw new Error(
-      '`update(...)` is not supported when using `renderAsync` use `await updateAsync(...)` instead',
+      '`rerender(...)` is not supported when using `renderAsync` use `await rerenderAsync(...)` instead',
     );
   };
-  const updateAsync = async function (component: React.ReactElement) {
+  const rerenderAsync = async function (component: React.ReactElement) {
     // eslint-disable-next-line require-await
     await act(async () => {
       renderer.update(wrap(component));
@@ -86,14 +86,14 @@ function buildRenderResult(
     });
   };
 
-  addToCleanupQueue(unmount);
+  addToCleanupQueue(unmountAsync);
 
   const result = {
     ...getQueriesForElement(instance),
-    update,
-    updateAsync,
-    rerender: update, // alias for `update`
-    rerenderAsync: updateAsync, // alias for `update`
+    rerender,
+    rerenderAsync,
+    update: rerender, // alias for `rerender`
+    updateAsync: rerenderAsync, // alias for `rerenderAsync`
     unmount,
     unmountAsync,
     toJSON: renderer.toJSON,

src/screen.ts

@@ -25,12 +25,12 @@ const defaultScreen: Screen = {
     throw new Error(SCREEN_ERROR);
   },
   debug: notImplementedDebug,
+  rerender: notImplemented,
+  rerenderAsync: notImplemented,
   update: notImplemented,
   updateAsync: notImplemented,
   unmount: notImplemented,
   unmountAsync: notImplemented,
-  rerender: notImplemented,
-  rerenderAsync: notImplemented,
   toJSON: notImplemented,
   getByLabelText: notImplemented,
   getAllByLabelText: notImplemented,