1

I'm making tests on an application that has several pages. One of the pages redirects to another through a button like the following

<div>
  <Header />
  <main className={styles.container}>
    {loading ? <Loading /> : (
      <section className={styles.userContainer}>
      <div className={styles.userImageContainer}>
        {userData.image === '' ? <UserCircle size={60} className={styles.userIcon}/> : <img src={ userData.image } alt={ `${userData.name} photo`} className={styles.userImage} />}            
        <NavLink to="/profile/edit"><button type="button" className={styles.editButton}>Profile Edit</button></NavLink>
      </div>
      <h4 className={styles.nameHeader}>Name:</h4>
      <p className={styles.name}>{ userData.name }</p>
      <h4 className={styles.emailHeader}>Email:</h4>
      <p className={styles.email}>{ userData.email }</p>
      <h4 className={styles.descriptionHeader}>Description:</h4>
      <p className={styles.description}>{ userData.description }</p>
      <button className={styles.logoutBtn} onClick={ handleLogoutBtn }>Logout</button>
    </section>
    )}        
  </main>
</div>

On the path /profile I have the following test that works fine:

it('should render the default icon', async () => {
renderWithRouter(<App />, { route: '/profile' });

await waitForElementToBeRemoved(() => screen.queryAllByText('Loading...'), { timeout: 3000 });    

const defaultIconEl = screen.getByAltText(/undefined/i);
expect(defaultIconEl).toBeInTheDocument();

I want to wait for the element loading to finish its rendering in order to test what's on /profile/edit, but when I use waitForElementToBeRemoved the SAME WAY as /profile I'm unable.

it('should render the inputs', async () => {
renderWithRouter(<App />, { route: '/profile/edit' });

expect(screen.getAllByText('Loading...').length).toBe(2);
expect(screen.getAllByText('Loading...')).toBeDefined();
await waitForElementToBeRemoved(() => screen.queryAllByText('Loading...'), { timeout: 3000 });

And I get the following message:


Vitest caught 1 unhandled error during the test run. This might cause false positive tests.
Please, resolve all the errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Error: Errors occurred while running tests. For more information, see serialized error.
 ❯ Object.runTests node_modules/vitest/dist/chunk-vite-node-externalize.0791f2ed.mjs:7047:17
 ❯ processTicksAndRejections node:internal/process/task_queues:96:5
 ❯ async file:/home/kelder/Documentos/Projetos/myMusic-app/node_modules/vitest/dist/chunk-vite-node-externalize.0791f2ed.mjs:10544:9
 ❯ Vitest.runFiles node_modules/vitest/dist/chunk-vite-node-externalize.0791f2ed.mjs:10557:12
 ❯ Timeout._onTimeout node_modules/vitest/dist/chunk-vite-node-externalize.0791f2ed.mjs:10608:7

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: {
  "errors": [
    [TypeError: Cannot read properties of undefined (reading 'length')],
  ],
}
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

The loading happens before everything else is rendered, so I need to wait for it to disappear so as to I'm able to test everything else. Like I said, it works fine on /profile and if I comment the waitForElementToBeRemoved line, the tests on the lines over pass. Does anyone have an idea what's going on?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Kelder Passos
  • 11
  • 1
  • 3
  • It seems the test is informing you that `screen.getAllByText('Loading...')` is undefined, so it can't read the `length` property. Should the test `expect(screen.getAllByText('Loading...')).toBeDefined();` maybe be prior to any tests that assume `screen.getAllByText('Loading...')` is defined? – Drew Reese Jul 24 '22 at 23:54
  • Thank you for your reply. I changed the order but the problem continues. If the line with waitForElementToBeRemoved is commented, the problem doesn't show up no matter the order. – Kelder Passos Jul 30 '22 at 12:17
  • 1
    I'm having a similar problem with vitest throwing errors when doing `await waitFor()` and it feels like a similar case – JesusIsMyDriver.dll Jul 17 '23 at 03:23

0 Answers0