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?