expect-enzyme

Super-powered enzyme assertions

Why you need this

The expect library by mjackson is super great. I'm not gonna try to convince you of that. Try it for yourself and experience the magic of improved error messages.

While expect excels in delivering quality errors messages, it has no idea what enzyme is.

If you're writing React tests with expect, you've probably seen this madness:

// Assert that "MyComponent" exists.
expect(element.find('MyComponent').exists()).toBe(true)

// Assert "Counter" was given the number 6.
expect(element.find('Counter').prop('count')).toBe(6)

That's cool and all, but what kind of error messages do you get?

Error: Expected false to be true

Error: Expected 0 to be 6

I think we can improve.

Why it's awesome

This library teaches expect how to enzyme. It adds detection to built-ins, and extends it with new enzyme-specific assertions.

For example:

expect(element).toBeA('video')
// Error: Expected div to be a video

expect(leaderboard).toContain('HighScore')
// Error: Expected element to contain "HighScore"

expect(clickCounter).toHaveState({ clicks: 1 })
// Error: Expected state "clicks" to equal 1

You get the idea.

Installation

$ npm install --save-dev [email protected] expect-enzyme

WARNING: expect merged with the Jest project and underwent massive changes, leaving this library incompatible. Using anything later than v1 may literally explode the universe. IMHO, it was a good change. Jest is an incredible test framework. They'll do well by expect.

If node starts yelling about missing packages, you might wanna install these too, then skim the enzyme install docs.

# Setup is weird. This should help.
$ npm install --save-dev enzyme react react-dom react-test-renderer enzyme-adapter-react-16

Extending

import expect from 'expect'
import enzymify from 'expect-enzyme'

// Infects the kernel with a crippling rootkit.
// Just kidding.
expect.extend(enzymify())

API

• Augmented
• Extensions

Augmented

These are the expect methods that understand enzyme with this plugin:

• .toBeA
• .toBeAn
• .toNotBeA
• .toNotBeAn
• .toExist
• .toNotExist
• .toContain
• .toNotContain

.toBeA(type)

Asserts a component is the given type.

// Can use a string...
expect(element).toBeA('video')

// Or a component type.
expect(element).toBeA(ProfilePage)

Error

Error: Expected div to be a video

Aliases: .toBeAn()

.toNotBeA(type)

Asserts a component is not the given type.

// Once again, it accepts a string...
expect(element).toNotBeA('nav')

// Or a component type.
expect(element).toNotBeA(DropDown)

Error

Error: Expected nav to not be a nav
Error: Expected DropDown to not be a DropDown

Aliases: .toNotBeAn()

.toExist()

Asserts an element exists.

expect(element).toExist()

Error

Error: Expected element to exist

.toNotExist()

Asserts an element does not exist.

Note: using .toNotContain often produces better error messages.

// This shouldn't contain an ErrorMessage component.
expect(element.find('ErrorMessage')).toNotExist()

Error

Error: Expected element to not exist

.toContain(selector)

Asserts the component does contain the given selector.

// This blog post should have a byline.
expect(blogPost).toContain('article')

// Works with components, too.
expect(blogPost).toContain(AuthorByline)

// And attribute selectors. But please don't.
expect(blogPost).toContain({ commentsEnabled: true })

Error

Error: Expected element to contain "article"
Error: Expected element to contain "AuthorByline"
Error: Expected element to contain "{commentsEnabled: true}"

.toNotContain(selector)

Asserts the component does not contain the given selector.

Note: accepts the same types as .toContain

// This search should not have a search result.
expect(search).toNotContain('SearchResult')

Error

Error: Expected element to not contain "SearchResult"

Extensions

New methods added for expect assertions.

• .toHaveProp
• .toHaveProps
• .toHaveClass
• .toHaveState
• .toHaveRendered
• .toHaveStyle
• .toHaveContext

.toHaveProp(name, [value])

Asserts a component was given a prop, and optionally specifies its value.

// Assert the element has the prop "disabled".
expect(element).toHaveProp('disabled')

// Assert the value of the users' name.
expect(user).toHaveProp('name', 'l33t_hackzor')

Error

Error: Expected div to have prop "disabled"
Error: Expected User property "name" to be "l33t_hackzor"

Negation: .toNotHaveProp()

.toHaveProps({...props})

Asserts a component has a set of properties.

// Asserts the button has all these properties.
expect(button).toHaveProps({size: 'large', type: 'action'})

Error

Error: Expected Button to have prop "size"

Negation: .toNotHaveProps()

.toHaveClass(className)

Asserts a component contains a class name.

// This button should be disabled.
expect(button).toHaveClass('disabled')

Error

Error: Expected button to have class "disabled"

Negation: .toNotHaveClass()

.toHaveState({...state})

Asserts a component contains specific state.

// Throws if either property is different.
expect(counter).toHaveState({
  isActive: true,
  clickCount: 3,
})

Error

Error: Expected state "clickCount" to equal 3

Negation: .toNotHaveState()

.toHaveRendered(element)

Asserts the component rendered the given value, or just that it rendered something.

// The first event looks exactly like this.
expect(calendar.find('Event').first()).toHaveRendered(<Event invites={invites} />)

// This list should be empty.
expect(listOfRegrets).toHaveRendered(null)

// I don't trust this button.
expect(stockAdvice).toHaveRendered(<button disabled={false}>Buy now!</button>)

// It exists and it didn't render `null`.
expect(singers.find('Elvis')).toHaveRendered()

Error

Error: Expected element to equal:
   <Event invites={Array[22]} />

Error: Expected element to equal "null"

Error: Expected element to equal:
   <button disabled={false}>Buy now!</button>

Error: Expected element to have rendered something

Negation: .toNotHaveRendered()

.toHaveStyle(Object || property, [value])

Asserts a component contains the given css. Specifying the value is optional.

// This dialog should be hidden.
expect(dialog).toHaveStyle('display', 'none')

// You don't need to specify the value, though.
expect(dialog).toHaveStyle('transition')

// You can also assert a whole collection of styles.
expect(marquee).toHaveStyles({
  fontFamily: 'comic-sans',
  color: 'orange',
})

Error

Error: Expected Dialog to have css {display: 'none'}
Error: Expected Dialog to have css property "transition"
Error: Expected Marquee to have css {fontFamily: 'comic-sans'}

Negation: .toNotHaveStyle()

.toHaveContext({...context})

Asserts the component contains the given context.

Honestly, this only comes in handy if you're ensuring the contextTypes incantation succeeded.

Note: React's context API is fickle. Make sure you read the docs before doing anything crazy. Also, be sure to ask yourself why you're using the context API at all.

// Ensure your component receives this context.
// You'll probably never do this unless you're a hardcore React library developer.
expect(element).toHaveContext({
  state: {
    value: 'maybe',
  },
})

Error

Error: Expected context property "state" to equal {value: 'maybe'}

Negation: .toNotHaveContext()

Support

:star: Please star this repository to maintain my unbounded ego.

:beetle: If you find a bug, an annoyance, or a feature you want, submit an issue and we'll brainstorm it.