Only the last 2 actions showing in Jest snapshot

[michalkopanski]

Pre-holiday greetings! Hope this issue finds you well. We're using KBar for a command palette component that has 7 actions in a single section at the root, and a second section with 1 action that has 11 children.

Everything works well in the UI, but when writing specs using Jest and testing-library, only the last 2 items end up rendering. Any insight or help pointing me in the right direction would be greatly appreciated.

Below are a few examples of the expected DOM based on the actions provided, and the actual DOM:

Scenario 1

Provided actions and expected DOM:

 - Section A
  - Action 1
  - ...
  - Action 7
  - Section B
  - Parent Action
    - Child Action 1
    - ...
    - Child Action 11

Actual DOM:

- Section B
- Parent Action

Scenario 2

Provided actions and expected DOM:

- Section A
- Action 1
- Action 2

Actual DOM:

- Action 1
- Action 2

[michalkopanski]

Following up here with some additional context:

• While looking at the snapshot, I noticed that the translateY values of both actions were 0px.
• Realized the issue seems to be related to react-virtual not having enough space to render the actions. This was addressed by mocking the window size as described here: https://stackoverflow.com/a/62214834
• Now that the window size is sufficient, rather than the last 2 actions being rendered, it's the first 2 actions, and the translateY is 0px for the first and 2000px for the second, which is also the height I set my window size to.
• Changing the window size and regenerating the snapshot always shows that value for the translateY of the second action.

At this point, I'm not sure if it's my test environment, react-virtual or kbar that's not rendering the list properly. Any help would be greatly appreciated!

[timc1]

Hey @michalkopanski! You may need to wait for the items to update prior to applying your check.

As an aside, why are you snapshot testing whether these actions show up? The logic would be handled by kbar itself

[michalkopanski]

Hey @timc1, thanks for your suggestion, and sorry for the late reply.

You may need to wait for the items to update prior to applying your check.

Tried waiting for them, and it looks like they're rendered, but their translateY values are still off, and the second action is always at the bottom of the viewport.

As an aside, why are you snapshot testing whether these actions show up? The logic would be handled by kbar itself

This test is part of our larger CI suite, so I'd like to do at least some regression testing in case a new version of kbar breaks expected behavior, or in the case a code change elsewhere affects it.

We shipped with limited testing of just two mocked actions, but we would love to have 1:1 coverage, so I would love any additional input in case anyone else has run into similar issues.

[stale[bot]]

Hey! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[npfitz]

@michalkopanski I'm not sure if you're still stuck on this, but I have a similar issue and it also required mocking getBoundingClientRect, whish is also pretty common in the issues in react-virtual

[michalkopanski]

Thanks for taking the time to comment @npfitz! We're stilling running the test for two mocked actions, so I'll give your suggestion a try when I have a chance.

[npfitz]

I found that mocking with quite small numbers for offsetHeight also helped a lot. When observing the DOM, I was able to verify that traslateY on all the virtual items made sense.