Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Understand the Different Accepted Selectors in Enzyme


    Many of the methods used in Enzyme’s API accept a selector as an argument. In this lesson we will go over the valid CSS, prop, object property, component displayName, and component constructor selectors that can be used as method arguments.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: As we see, many methods in the Enzyme API accept a selector as an argument, there are five different valid types of selectors. We can use the element syntax, like we are doing here, or we can use the class syntax, the ID syntax, or the attribute syntax. We can also combine these together.

    We are also able to use contextual selectors such as the >, +, and the ~. All these that I have shown so far are valid CSS selectors and are just one of five categories of selectors that are accepted.

    The next category is the prop selectors. Instead of our app.js, let's paste in a component called title that simply returns a dev with a text prop. Let's add this title underneath their header and give it a prop of some title.

    Now instead of our app test, we can use the attribute syntax to look for the element with the text prop. This is obviously handy when looking for specific components and set up our render tree. Now the key and ref prop cannot be used in the situation.

    The third and fourth categories entail referencing a component constructor and display name. Referencing a component constructor would be passing through a function that replicates the constructor of the component we are trying to find. If we are using a display name with our component, all we simply need to do is pass through a string with that title.

    Finally, we can use the object property selector to find nodes. This is where we're able to pass an object as an argument that matches properties of an element, so this alt logo will match on this image element.

    Undefined properties are not allowed in the object property selector. This will cause an error to be thrown.