get html element in react tests using enzyme

Question

How to get HTML elements in react tests with Enzyme? I am able to find wrappers. But I want HTML element. Becuase block of my code which needs to be covered has offsetParent check on HTML element which is not getting covered. Below is the sample.

 it('add class test', async () => {

    const wrapper = mount((
        <div class='ag-cell'>
            <div class='ag-react-conatiner'></div>
            <span anum={3} abool={false} />
            <span anum="3" abool="false" />
        </div>
    ));

    const x = wrapper.find('.ag-react-conatiner').offsetParent;

    console.log(wrapper.find('.ag-react-conatiner').offsetParent);
 }

I am able to get wrapper.find('.ag-react-conatiner'). How i can get offsetParent of it?

dorriz · Accepted Answer · 2019-12-05 17:25:20Z

1

Why not add the attribute data-testid='something' to your elements use

const wrapper = mount(<MyComponent />);
expect(wrapper.find('[data-testid="something"]')).to.have.lengthOf(1);

Using the above attribute makes it clear its used for testing , unlike classes which can easily be renamed etc in development.

answered Dec 5, 2019 at 17:25

dorriz

2,7693 gold badges15 silver badges19 bronze badges

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

5 Comments

Mahesh Over a year ago

Problem is not about finding wrapper. With out data-testid also i could get proper wrapper output. But in my case i need to get offsetParent of HTMLElement which i can't find on wrapper object

Mahesh Over a year ago

As wrapper.find('.ag-react-conatiner') is not HTML element i can't find offsetParent on it. I need a way to get HTML element from corresponding wrappers.

dorriz Over a year ago

Does this help const wrapper = shallow(<MyComponent />); expect(wrapper.find(Foo).closest('.bar')).to.have.lengthOf(1);

Mahesh Over a year ago

Shallow won't help. I have tested it. Shallow only render s single level.

dorriz Over a year ago

and you cannot use mount , I only though find().closest might help. When you say offsetParent check can you show me the code ? I'm not sure I fully understood

Collectives™ on Stack Overflow

get html element in react tests using enzyme

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related