menu

Testing Library

Simple and complete DOM testing utilities that encourage good testing practices.

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# General Help
view-forward
# Angular Help
view-forward
# Cypress Help
view-forward
# DOM Help
view-forward
# React Help
view-forward
# TestCafe Help
view-forward
# Vue Help
view-forward
Team

(solved) fireEvent.click doesn't make my component emit the event

October 27, 2019 at 9:32am

(solved) fireEvent.click doesn't make my component emit the event

October 27, 2019 at 9:32am (Edited 5 months ago)
We have a selector (again with this selector :D) that has the following bug: When I click on its open indicator (the arrow on the right that shows if it's open or closed) it should toggle the dropdown (open when it's closed and the close when it's opened)
The first scenario (open if closed) is easy to test. The other way doesn't work for some reason. I'm trying to understand why. The test is written like this:
function renderComponent({ options = [], optionKey = 'id' } = {}) {
return render(Selector, {
props: {
onChange: jest.fn(),
options,
optionKey,
},
stubs: { FontAwesomeIcon: emptyComponent },
});
}
test('when user clicks on open indicator icon should toggle the dropdown', async () => {
const { getByTestId, queryByTestId } = renderComponent({ options });
const openIndicator = getByTestId('open-indicator');
await fireEvent.click(openIndicator);
expect(queryByTestId('selector-dropdown')).toBeVisible();
await fireEvent.click(openIndicator);
expect(queryByTestId('selector-dropdown')).not.toBeVisible();
});
It seems like the second click doesn't emit the event. I even added console.logs print when clicking, but I see only the first one.
Is there a way to see emitted events also on child components?

October 27, 2019 at 9:32am
BTW, thanks for making this library!
  • reply
  • like
I fixed it by wrapping the open indicator with a button, I guess it's needed for emitting click events? but since in the browser it work either way, why didn't it work in testing? After adding the button I also started seeing console logs that I missed before
  • reply
  • like
Hi Chaim! Glad to know you sorted it out. It's hard to say without seeing the related parts of your component, but I'd say that having a <button> makes total sense as you are firing a "click" event. You could that programmatically, but honestly, if there's a valid, accessible HTML element that handles it for you, I'd go that way :)
Thanks for you kind words.
  • reply
  • like
I guess you are right, thanks!
  • reply
  • like

March 16, 2020 at 7:10pm
Maybe you can help me too ...
Have this markup:
<button class="base-dropdown-trigger" @click="setVisible" data-testid="base-dropdown-trigger">
...
<div v-show="isVisible" data-testid="base-dropdown-content-container">
and the test:
const baseDropdownTrigger = getByTestId('base-dropdown-trigger')
const baseDropdownContentContainer = queryByTestId('base-dropdown-content-container')
test('It shows on trigger action', async () => {
await fireEvent.click(baseDropdownTrigger)
expect(baseDropdownContentContainer).toBeVisible()
})
and method:
setVisible(): void {
this.isVisible = !this.isVisible
},
This one does not work, the base-dropdown-trigger still has the display: none style in result. What is not right?
  • reply
  • like

March 17, 2020 at 6:55am
before the test and the click baseDropdownContentContainer is null, because queryByTestId already returned. you want to call queryByTestId again. something like:
expect(queryByTestId('base-dropdown-content-container')).toBeVisible()
  • reply
  • like
Unable to find an element by: [data-testid="base-dropdown-content-container"] :/ outside the test it's not null though
Edited
  • reply
  • like