Frontend Tests, hooks and utils #437
Conversation
Fix App test
| const insideElement = document.createElement('div'); | ||
| ref.current.appendChild(insideElement); |
There was a problem hiding this comment.
I think we should use the outsideElement code here instead as the handler would only be called if the click was on an element outside the one hosting the hook.
There was a problem hiding this comment.
Pushed through new changes, but I'm not 100% sure that my test is doing the right thing.
I changed this so that the event is dispatched to outerElement after unmounting the ref element hosting the hook, but for some reason it only works if I don't use act(). Keeping the both unmount() and outsideElement.dispatchEvent(event) inside the act() scope caused the test to fail, removing act results in a failed test with the same assertion.
I read the docs and this related post, but I'm still not 100% sure what is going on.
Am I actually testing the correct behavior this way?
There was a problem hiding this comment.
AB - use RTL debug to check that all DOM elements are present. Can also get more specific with assertions to double check that correct behavior is being tested
|
|
||
| outsideElement.dispatchEvent(event); | ||
| expect(handler).toHaveBeenCalledTimes(1); | ||
| expect(handler).not.toHaveBeenCalledTimes(2); |
There was a problem hiding this comment.
nitpick: if you've already checked it was called once, the second assert is redundant
Using Vitest as testing framework, this sets up some basic tests for custom hooks and utility functions. More tests to come!