Super-powered enzyme assertions
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.
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 1You get the idea.
$ npm install --save-dev expect@1.x.x expect-enzymeWARNING:
expectmerged with the Jest project and underwent massive changes, leaving this library incompatible. Using anything later thanv1may literally explode the universe.
IMHO, it was a good change. Jest is an incredible test framework. They'll do well byexpect.
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-16import expect from 'expect'
import enzymify from 'expect-enzyme'
// Infects the kernel with a crippling rootkit.
// Just kidding.
expect.extend(enzymify())These are the expect methods that understand enzyme with this plugin:
Asserts a component is the given type.
// Can use a string...
expect(element).toBeA('video')
// Or a component type.
expect(element).toBeA(ProfilePage)Error: Expected div to be a video
Aliases:
.toBeAn()
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: Expected nav to not be a nav
Error: Expected DropDown to not be a DropDown
Aliases:
.toNotBeAn()
Asserts an element exists.
expect(element).toExist()Error: Expected element to exist
Asserts an element does not exist.
Note: using
.toNotContainoften produces better error messages.
// This shouldn't contain an ErrorMessage component.
expect(element.find('ErrorMessage')).toNotExist()Error: Expected element to not exist
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: Expected element to contain "article"
Error: Expected element to contain "AuthorByline"
Error: Expected element to contain "{commentsEnabled: true}"
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: Expected element to not contain "SearchResult"
New methods added for expect assertions.
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: Expected div to have prop "disabled"
Error: Expected User property "name" to be "l33t_hackzor"
Negation:
.toNotHaveProp()
Asserts a component has a set of properties.
// Asserts the button has all these properties.
expect(button).toHaveProps({size: 'large', type: 'action'})Error: Expected Button to have prop "size"
Negation:
.toNotHaveProps()
Asserts a component contains a class name.
// This button should be disabled.
expect(button).toHaveClass('disabled')Error: Expected button to have class "disabled"
Negation:
.toNotHaveClass()
Asserts a component contains specific state.
// Throws if either property is different.
expect(counter).toHaveState({
isActive: true,
clickCount: 3,
})Error: Expected state "clickCount" to equal 3
Negation:
.toNotHaveState()
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: 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()
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: 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()
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: Expected context property "state" to equal {value: 'maybe'}
Negation:
.toNotHaveContext()
⭐ Please star this repository to maintain my unbounded ego.
🪲 If you find a bug, an annoyance, or a feature you want, submit an issue and we'll brainstorm it.