'fireEvent.click() not working with mocha and jsdom

I have a simple test case that is failing to click the button. The button exists and is found, but firing the click event is not triggering the onClick handler for the button. Unsure if this is related to jsdom or mocha setup, but curious if anyone can get this working with this particular version of mocha?

Node: v15.12.0

Packages:

"react": "16.13.1"
"mocha": "6.2.2"
"chai": "4.2.0"
"sinon": "7.5.0"
"@testing-library/react": "^11.1.2"
"jsdom": "15.2.0"
"jsdom-global": "3.0.2"

Test case:

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { expect } from 'chai';
import { fake } from 'sinon';

describe.only('Repro', () => {
  it('handles click', () => {
    const onClickFake = fake(() => console.log('onClick'));
    render(<button onClick={onClickFake}>Click Me</button>);
    screen.debug();
    fireEvent.click(screen.getByRole('button'));
    expect(onClickFake.calledOnce).to.be.true;
  });
});

Also, a potentially unrelated note, when I call debug with a text child element, it appears to print the DOM object instead of just showing the text. This makes debug printing for complex components useless.

Debug Print:

<body>
  
  <div
    id="root"
  />
  <div>
    <button>
      Object {
        "_data": "Click Me",
        "_index": undefined,
        "_nextSibling": [Circular],
        "_nid": 8,
        "_previousSibling": [Circular],
        "nodeType": 3,
        "ownerDocument": Object {
          "_address": "http://localhost:3000",
          "_childNodes": null,
          "_contentType": "text/html",
          "_firstChild": <html>
            <head />
            <body>
              <div
                id="root"
              />
              <div>
                <button>
                  [Circular]
                </button>
              </div>
            </body>
          </html>,
          "_index": undefined,
          "_lastModTime": 1,
          "_listeners": Object {
            "DOMContentLoaded": Array [
              Object {
                "capture": false,
                "f": [Function],
                "listener": [Function],
              },
            ],
            "click": Array [
              Object {
                "capture": false,
                "f": [Function],
                "listener": [Function],
              },
            ],
          },
          "_nextSibling": [Circular],
          "_nextnid": 9,
          "_nid": 1,
          "_nodeIterators": null,
          "_nodes": Array [
            null,
            [Circular],
            <html>
              <head />
              <body>
                <div
                  id="root"
                />
                <div>
                  <button>
                    [Circular]
                  </button>
                </div>
              </body>
            </html>,
            <head />,
            <body>
              <div
                id="root"
              />
              <div>
                <button>
                  [Circular]
                </button>
              </div>
            </body>,
            <div
              id="root"
            />,
            <div>
              <button>
                [Circular]
              </button>
            </div>,
            <button>
              [Circular]
            </button>,
            [Circular],
          ],
          "_previousSibling": [Circular],
          "_quirks": true,
          "_scripting_enabled": true,
          "_templateDocCache": null,
          "byId": Object {
            "root": <div
              id="root"
            />,
          },
          "defaultView": [Object],
          "doctype": null,
          "documentElement": <html>
            <head />
            <body>
              <div
                id="root"
              />
              <div>
                <button>
                  [Circular]
                </button>
              </div>
            </body>
          </html>,
          "implementation": Object {
            "contextObject": [Circular],
          },
          "isHTML": true,
          "modclock": 4,
          "nodeType": 9,
          "ownerDocument": null,
          "parentNode": null,
          "readyState": "loading",
        },
        "parentNode": <button>
          [Circular]
        </button>,
      }
    </button>
  </div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'fireEvent.click() not working with mocha and jsdom

Sources

Related Questions