Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

some part5 component tests appear to fail #82

Open
marcindulak opened this issue Jan 9, 2023 · 3 comments
Open

some part5 component tests appear to fail #82

marcindulak opened this issue Jan 9, 2023 · 3 comments

Comments

@marcindulak
Copy link

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:

> [email protected] 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
Copy link

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

@marcindulak
Copy link
Author

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

@ssqureshi
Copy link

ssqureshi commented Jan 11, 2023 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants