How can I make my tests more declarative?

// Imperative Approach

import React from 'react'
import { mount } from 'enzyme'
import WishList from './WishList'

describe('<Wishlist /> component', () => {
  it('should behave correctly', () => {
    const label = document.querySelector('.message')
    const button = document.querySelector('.button')
    expect(label.text()).toBe('Add to wishlist')
    button.click()
    expect(label.text()).toBe('Added to wishlist')    
  })
})
// Declarative Approach

import React from 'react'
import { mount } from 'enzyme'
import WishList from './WishList'

const buildPageObject = (component, props = {}, renderer = 'mount') => {
  const wrapper = renderer(<component {...props}>)
  const pageObject = {
    getMessage: () => wrapper.find('.messsage').text(),
    click: () => wrapper.find('.button').simulate('click')
  }
  return pageObject
}

describe('<Wishlist /> component', () => {
  it('should behave correctly', () => {
    const pageObject = buildPageObject(WishList)
    expect(pageObject.getMessage()).toBe('Add to wishlist')
    pageObject.click()
    expect(pageObject.getMessage()).toBe('Added to wishlist')
  })
})

Last updated

Was this helpful?