Nationwide Polamorous Matrimony

    expect-enzyme

    1.3.0 • Public • Published

    expect-enzyme

    Super-powered enzyme assertions

    Travis branch npm downloads npm versions

    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 expect@1.x.x 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

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

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

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

    Install

    npm i expect-enzyme

    DownloadsWeekly Downloads

    542

    Version

    1.3.0

    License

    MIT

    Last publish

    Collaborators

    • avatar