some part5 component tests appear to fail

[marcindulak]

npm --version
# Output
8.19.2
cat /etc/*release | grep PRETTY
# Output
PRETTY_NAME="Alpine Linux v3.17"

git clone https://github.com/fullstack-hy2020/part2-notes
cd part2-notes
git checkout part5-11
git rev-parse part5-11
# Output
44cb418875db7f41d7690f8cd99cd5d4c91d56fa

npm ci
CI=true npm run test -- --passWithNoTests

Output:

> notes@0.1.0 test
> react-scripts test --passWithNoTests

FAIL src/components/NoteForm.test.js
  ● <NoteForm /> updates parent state and calls onSubmit

    expect(received).toHaveLength(expected)

    Expected length: 1
    Received length: 0
    Received array:  []

      16 |   userEvent.click(sendButton)
      17 |
    > 18 |   expect(createNote.mock.calls).toHaveLength(1)
         |                                 ^
      19 |   expect(createNote.mock.calls[0][0].content).toBe('testing a form...' )
      20 | })

      at Object.toHaveLength (src/components/NoteForm.test.js:18:33)

FAIL src/components/Note.test.js
  ● clicking the button calls event handler once

    expect(received).toHaveLength(expected)

    Expected length: 1
    Received length: 0
    Received array:  []

      33 |   userEvent.click(button)
      34 |
    > 35 |   expect(mockHandler.mock.calls).toHaveLength(1)
         |                                  ^
      36 | })

      at Object.toHaveLength (src/components/Note.test.js:35:34)

FAIL src/components/Togglable.test.js
  ● <Togglable /> › after clicking the button, children are displayed

    expect(element).not.toHaveStyle()

    Compared values have no visual difference.

      32 |
      33 |     const div = container.querySelector('.togglableContent')
    > 34 |     expect(div).not.toHaveStyle('display: none')
         |                     ^
      35 |   })
      36 |
      37 |   test('toggled content can be closed', () => {

      at Object.toHaveStyle (src/components/Togglable.test.js:34:21)

Test Suites: 3 failed, 3 total
Tests:       3 failed, 4 passed, 7 total
Snapshots:   0 total
Time:        4.167 s
Ran all test suites.

[ssqureshi]

Having the exact same problem. In my own code as well as this example. I have tried almost everything

[marcindulak]

Using await in as in await userEvent..., and making the function async helps to get rid of the errors.

[ssqureshi]

Hey, await made the example test code work. But I have been using await from the start in my code and even though I can see the output changes using screen.debug(). The mockhandler is still returning an empty array. I am completely stumped. Thanks for your help

…

On Wed, 11 Jan 2023, 22:21 marcindulak, ***@***.***> wrote: Using await in as in await userEvent..., and making the function async helps to get rid of the errors. — Reply to this email directly, view it on GitHub <#82 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZP2SVLUC624ETD36S55FSLWR3TZFANCNFSM6AAAAAATVZEO74> . You are receiving this because you commented.Message ID: ***@***.***>