Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

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

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Understand the Different Accepted Selectors in Enzyme

    Tyler ClarkTyler Clark

    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.

    reactReact
    ^16.0.0
    jestJest
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    Instructor: 00:00 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.

    00:21 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.

    00:36 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.

    00:53 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.

    01:09 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.

    01:31 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.

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

    Discuss

    Discuss