Testing Recipes
  • Introduction
  • Cypress
    • How to navigate to a particular path
    • How to get hold of the currently focused element
    • How to confirm an element has a specific class
    • How to run just one of several tests
    • How to get hold of a specific element
    • How to type into an input field
    • How to confirm text value of input field
    • How to confirm list has expected number of items
    • How to stub a GET network request
    • How to wait for XHR response
    • How to create a single command from multiple commands
    • How to stub a POST network request
    • How to test for XHR failures
    • How to interact with hidden elements
    • How to create aliases for DOM elements
    • How to create a data-driven approach to testing
    • What are the different ways in which Cypress can be run
  • Jest
    • How can I test if a function was called?
    • How can I test if a curried function was called?
  • Architecture
    • How can I make my tests more declarative?
    • How can I make my tests more readable?
    • How can I speed up the writing of tests?
  • Enzyme
    • How can I set and get state in my component?
    • How can I simulate a click on a rendered component?
    • How can I simulate a change to an input field?
    • How can I check if a sub-component was rendered?
    • How can I invoke a method on my component?
    • How can I check to see if an event handler was invoked?
    • How can I set props and update a rendered component?
    • How can I mock the global window object in a test?
    • How can I mock functions used by the component I want to test?
  • Jasmine Recipes
    • How can I create a simple test suite?
    • What sort of matchers can I use on my expect calls?
    • How can I run code before and after each it block?
    • How can I mark tests as not having been implemented yet?
    • How can I spy on a method to check that it was called properly?
    • How can I test asynchronous code?
Powered by GitBook
On this page

Was this helpful?

  1. Architecture

How can I speed up the writing of tests?

import React from 'react'
import { mount } from 'enzyme'

const getNodeList = (component) => {
  const nodeList = component.find('[data-el]')
  return nodeList
}

const getInfoList = (nodeList) => {
  const infoList = nodeList.map(node => {
    const name = node.name()
    const value = node.prop('data-el')
    const text = node.text()
    return { name, value, text }
  })
  return infoList
}

const getFuncList = (infoList) => {
  return infoList.map(info => {
    const { name, value, text } = info
    switch(name) {
      case 'h1': {
        const methods = {
          [`get${value}Text`]: () => text      // (1) We can add set/get/click methods too
        }
        return methods
      }
    }
  })
}

const getPageObject = (TagName, props = {}, render = mount) => {
  const component = render(<TagName {...props} />)
  const nodeList = getNodeList(component)
  const infoList = getInfoList(nodeList)
  const funcList = getFuncList(infoList)
  const pageObject = { ...funcList[0] }        // (2) We should iterate over this in a more generic way
  return pageObject
}

export default getPageObject
const HeroPage = (props) => (
    <section>
        <h1 data-el='Header'>{props.text}</h1>
    </section>
)

export default HeroPage
import getPageObject from './getPageObject'
import HeroPage from './HeroPage'

describe('<HeroPage /> component', () => {
  it('should have correct text', () => {
    const props = { text: 'hello' }
    const pageObject = getPageObject(HeroPage, props)
    expect(pageObject.getHeaderText()).toBe(props.text)  // (3) The 'getHeaderText' was auto-magically made!
  })
})
PreviousHow can I make my tests more readable?NextHow can I set and get state in my component?

Last updated 5 years ago

Was this helpful?