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?

Jai · Accepted Answer · 2020-02-05 12:15:26Z

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.

answered Feb 5, 2020 at 12:15

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Moshe Kerbel Over a year ago

You are referring here to Enzyme, which is another wrapper on top of React. Accessing getDOMNode will just give me the same React wrapper I was talking about.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related