cannot pass test with testing-library

[saadlu]

Hi,

I am trying out flexlayout from the demo application. It is the same example as shown in the demo (from JSFiddle). Here is the full application code: https://github.com/saad-learns/flexdemo

I wanted to test out the behavior with testing-library. But I can't seem to fire the "click" event on the tab.

https://github.com/saad-learns/flexdemo/blob/main/src/FlexDemo.test.js

describe('Demo', () => {
  it('should switch tab when clicking tab title', async () => {
    render(<FlexDemo />);

    expect(screen.queryByText('Panel Three')).toBe(null);
    fireEvent.click(screen.getByText('Three'));

    expect(screen.getByText('Panel Three')).toBeVisible();
  });
});

the last expect does not pass. The fireevent does not seem to click the tab to switch to "Panel Three" tab content. (try it with npm run test)

But, similar test with cypress works:

https://github.com/saad-learns/flexdemo/blob/main/src/FlexDemo.cy.jsx

describe('<FlexDemo>', () => {
  it('should switch tab when clicking tab title', () => {
    cy.mount(<FlexDemo />);

    cy.findByText('Panel Three').should('not.exist');
    cy.findByText('Three').click();

    cy.findByText('Panel Three').should('exist').should('be.visible');
  });
});

(try it with npx cypress run --component or npx cypress open --component where you can also verify that the click does click on the tab)

thanks and any advice will be greately appreciated.

[saadlu]

thanks to @who-knows-who, who investigate the source code. It turns out we need send both mouseDown and mouseUp to switch the tab

https://github.com/saad-learns/flexdemo/blob/solution/src/FlexDemo.test.js

describe('Demo', () => {
  it('should switch tab when clicking tab title', async () => {
    render(<FlexDemo />);

    expect(screen.queryByText('Panel Three')).toBe(null);
    const tab = screen.getByText('Three');
    fireEvent.mouseDown(tab);
    fireEvent.mouseUp(tab);

    expect(screen.getByText('Panel Three')).toBeVisible();
  });
});