How to refer to conditional elements when unit testing React components using jest and enzyme

Question

I'm trying to test a component which should show a login and subscribe button when a user is not authenticated, but should show a logout button when a user is authenticated.

How should I refer to these buttons when making the test?

All examples I found is people doing things like:

expect(wrapper.find(Button).lenght).toBe(1); // or whatever

But this obviously doesn't fit my case, since I always have at least one button and they are all the same, except for its text and action.

So I think I need some way to refer to these buttons, so I could pass an authenticated prop and check if exactly the logout button is rendered.

What would be the best approach on doing that?

Michael Brewer-Davis · Accepted Answer · 2018-01-22 01:27:22Z

3

The options for selecting elements can be seen in the documentation for Selector.

In this case, you'd probably want to add css classes and use the class syntax, or perhaps the attribute syntax if your buttons use input elements where the text is set as an attribute.

answered Jan 22, 2018 at 1:27

Michael Brewer-Davis

14.3k5 gold badges41 silver badges50 bronze badges

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

Comments

Code-Apprentice · Accepted Answer · 2018-01-22 01:32:36Z

3

You need to determine what differentiates each button. First, find the button:

const button = wrapper.find(Button)

Then expect() on some characteristic of the button. For example,

expect(button.props().children).toEqual('Subscribe')

or

expect(button.props().children).toEqual('Logout')

answered Jan 22, 2018 at 1:32

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

Comments

Ihab · Accepted Answer · 2019-03-29 20:23:22Z

0

Just use filter:

wrraper.find(Button).filter({className:'any'})

wrraper.find(Button).filter({label:'any'})

...etc

answered Mar 29, 2019 at 20:23

Ihab

1

Collectives™ on Stack Overflow

How to refer to conditional elements when unit testing React components using jest and enzyme

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related