Enzyme Selectors

Enzyme Selector Categories

Following are the selector categories of Enzyme.

1.) Valid CSS Selectors

Enzyme supports a group of valid CSS selectors to find the nodes inside any render tree. Some support is as follows:

• Class syntax: (.foo, .foo-bar, etc.)
• Element tag name syntax: (input, span, div, etc.)
• id syntax: (#foo-bar, #foo, etc.)
• attribute syntax: ( [type="text"], [href="foo"], etc.)
• universal syntax: (*)
• React component name and props ( Button[type="submit"], Button, etc). However, it is strongly recommended to find by component constructor or function and not by the display name
   

The attribute syntax also works by the value rather than by the string. Strings, boolean property values, and numbers are supported. For example:

const wrapper = mount((
  <div>
    <span anum={3} abool={false} />
    <span anum="3" abool="false" />
  </div>
));

You can also try this code with Online Javascript Compiler

Run Code

The selector [anum=3] will select first but not second because there are no quotes surrounding the 3. The selector [anum="3"] will select second because it is explicitly looking for a string as the quotes surrounding 3. Similarly, for the boolean, [abool=false] will select first but not the second, etc.

Further, enzyme also supports combining any of those supported syntaxes together, as with CSS:

div.foo.bar
input#input-name
a[href="foo"]
.foo .bar
.foo > .bar
.foo + .bar
.foo ~ .bar
.foo input

2.) A React Component Constructor

The enzyme allows us to find React components based on their constructor. We can pass in reference to the component’s constructor. A React Component Constructor selector only checks the component type. It ignores the props and the children.

function MyComponent() {
  return <div />;
}

// find instances of MyComponent
const myComponents = wrapper.find(MyComponent);

You can also try this code with Online Javascript Compiler

Run Code

3.) A React Component displayName

The enzyme allows us to find the components based on a component’s displayName. If the component exists in a render tree where its displayName is set & has its first character as a capital letter, you can use a string to find it:

function MyComponent() {
  return <div />;
}

MyComponent.displayName = 'My Component';
 
// find instances of MyComponent
const myComponents = wrapper.find('My Component');

You can also try this code with Online Javascript Compiler

Run Code

Please note that this will only work if the selector (the component’s displayName) is a string which is starting with a capital letter. Strings starting with the lower case letters will be assumed to be CSS selectors (therefore tag name).

Selecting an HOC-wrapped component, or a component with a custom displayName, even with lowercase letters (for example, withHOC(MyComponent)), will work as well.

4.) Object Property Selector

The enzyme allows us to find the components and nodes based on a subset or a group of their properties:

const wrapper = mount((
  <div>
    <span foo={3} bar={false} title="baz" />
  </div>
));

 
wrapper.find({ foo: 3 });
wrapper.find({ bar: false });
wrapper.find({ title: 'baz' });

You can also try this code with Online Javascript Compiler

Run Code

Undefined Properties

Undefined properties are not allowed for the object property selector and hence will cause an error as follows:

wrapper.find({ foo: 3, bar: undefined });
// => TypeError: Enzyme::Props can't have 'undefined' values. Try using 'findWhere()' instead.

You can also try this code with Online Javascript Compiler

Run Code

If we have to search by undefined property value, then we can use .findWhere().

FAQs

1. Is it possible to access individual nodes within a component tree that is rendered by the enzyme using the CSS selectors?

Ans: Enzyme supports a subset of valid CSS selectors to find nodes inside a render tree.

2. How can you determine the components of an Enzyme?

Ans: Enzyme allows us to find the component based on a component's displayName. If a component exists in a render tree where its displayName is set and has its first character as a capital letter, then we can use a string to find it.

3. What is the use of a selector?

Ans: A selector is used to identify each component uniquely in the component tree. It also defines how the current component is represented in the HTML DOM.

4. What kind of testing is Enzyme?

Ans: Enzyme is a JavaScript Testing utility for React that makes it easier to test React Components' output.

Key Takeaways

In this blog, we have discussed Enzyme Selectors. We discussed the installation and configuration of Enzyme Selectors. Then we discussed the different categories of Enzyme Selectors. Then, in the end, we discussed a valid CSS selector, a react component constructor selector, a react component displayName selector, object property selector.

Check out this problem - No of Spanning Trees in a Graph

We hope that this blog helped you enhance your knowledge regarding Enzyme. Do upvote our blog to help other ninjas grow. 
 

If you would like to learn more, head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, and much more. Do upvote our blog to help other ninjas grow. Happy Coding!

Happy Learning!