@commercetools/jest-enzyme-matchers

@commercetools/jest-enzyme-matchers

Enzyme specific jest matchers

Installation

• Add package

npm install @commercetools/jest-enzyme-matchers --save-dev

• Add testFrameworkScriptFile

Set up a setupTestFrameworkScriptFile. Create that file and add it to the jest configuration.

• Add matchers to Jest

In that testFrameworkScriptFile file, import the matchers and add them to jest

import * as enzymeMatchers from '@commercetools/jest-enzyme-matchers'

expect.extend(enzymeMatchers)

// more expect.extend calls for your own matcheres
// expect.extend({ /* ... */ })

Usage

toRender(selector)

Passes when at least one element matching the selector is found in the wrapper.

import Icon from 'somewhere'

describe('Component', () => {
  const wrapper = shallow(<Component />)
  it('should render an Icon', () => {
    expect(wrapper).toRender(Icon)
  })
  it('should render a Button', () => {
    expect(wrapper).toRender('Button')
  })
})

toRenderElementTimes(selector, times)

Passes when the number of elements matching the selector found in the wrapper matches times exactly.

import Icon from 'somewhere'

describe('Component', () => {
  const wrapper = shallow(<Component />)
  it('should render one Icon', () => {
    expect(wrapper).toRenderElementTimes(Icon, 1)
  })
  it('should render two Buttons', () => {
    expect(wrapper).toRenderElementTimes('Button', 2)
  })
})

toContainClass(className)

Passes when the className is present on the wrapper passed to expect.

describe('Component', () => {
  const wrapper = shallow(<Component />)
  it('should add the class name', () => {
    expect(wrapper).toContainClass('foo')
  })
  it('should not add the class name', () => {
    expect(wrapper).not.toContainClass('bar')
  })
})