0
 PASS  app/components/lists/VideoCardList.test.tsx
  ● Console

    console.error
      Warning: You called act(async () => ...) without await. This could lead to unexpected testing behaviour, interleaving multiple act calls and mixing their scopes. You should - await act(async () => ...);

      at printWarning (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:68:30)
      at error (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:44:5)
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15297:13
      at tryCallOne (node_modules/react-native/node_modules/promise/lib/core.js:37:12)
      at node_modules/react-native/node_modules/promise/lib/core.js:123:15
      at flush (node_modules/asap/raw.js:50:29)

This is the entire error code. And the below is my test code that caused the error.

it("displays more data when the scroll reached end", async () => {
  let cardList = component.getByTestId("videoCardList");

  // fire onLayout event to generate initial dataset
  fireEvent(cardList, "layout", {
    nativeEvent: { layout: { width: 300 } },
  });

  cardList = await component.findByTestId("videoCardList");

  fireEvent(cardList, "endReached");

  const cardListItems = await component.findByTestId(
    "videoCardItem" + initialListLength // assigned in previous TC, if things went well, it's 5 (it's just number value)
  );

  expect(cardListItems).toBeTruthy();
});

Fortunately, my code passes the TC, but unfortunately, the message really bothers me.

Anyway, I didn't call the method: act(). I've googled, and learned the fact that some methods from library like fireEvent() actually wrapping act(), and it seems that my poor code caused a sort of side effect. But I've failed to find out the way to resolve the error.

Masoud Keshavarz
  • 2,166
  • 9
  • 36
  • 48
Anteater333
  • 57
  • 5
  • I don't use react so I can't be sure, but it looks like you have to use `await` before `fireEvent()` function which makes sense, becouse probably this function delegates asynchronous task to do. – Panczur Apr 09 '22 at 06:31
  • @Panczur thank you for your suggestion, but this generated another error message, I'd tried before. – Anteater333 Apr 09 '22 at 07:04

1 Answers1

0

You call the following line of code outside of an async function:

cardList = await component.findByTestId("videoCardList");

You do it again here:

const cardListItems = await component.findByTestId(
      "videoCardItem" + initialListLength // assigned in previous TC, if things went well, it's 5 (it's just number value)
    );

You can resolve this by either wrapping these items in async functions and then calling the new async function:

const functionName = async () => {
  await asyncFunctionCall();
}

OR

You can use .then/.catch syntax instead of async/await:

asyncFunctionCall.catch(e => console.log(e));
man517
  • 419
  • 5
  • 9
  • Thx, but before I try this solution, I wonder if the first `async`, the one at the 2nd parameter of `it()` method, isn't enough for covering `await` of `findByTestId`. – Anteater333 Apr 09 '22 at 07:08
  • It is not because you only apply ```async``` to that function call, not to the following ones. – man517 Apr 10 '22 at 05:18
  • I thought your answer makes sense too, but this generate the same message. Actually, I also used `await findByTestId()` inside `it()`'s second arrow function parameter with `async` in another TC before, and it doesn't generate the warning message. So, I wonder if there is any possibility that this test code is not bad and my application code in development may occured the warning. (idk that might mean I actually failed the test. or not. anyway my application matches my expectation right now.) Appreciate for your suggestion. – Anteater333 Apr 10 '22 at 10:52