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.
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.