How to query native html elements when testing a React application with Jest?

Question

When I render React elements, for example, a Button, then an equivalent HTML button element is created in the DOM.

But, when I query the DOM I'm still getting a wrapped element.

HTMLButtonElement {
      '__reactInternalInstance$gt1haeiqrhv': FiberNode {
        tag: 5,
        key: null,
        ...
}

Why don't I get the native element as if I rendered a normal div using JSDOM? Is there a way to get it?

Answer 1

I suppose you have to query for getDOMNode :

const button = wrapper.find('button').getDOMNode();
// const button = wrapper.getDOMNode(); // <---if wrapper is button element

It will give you the lying dom element in the component.