วิธีการทดสอบ Custom Hooks ของ React ในการทดสอบ Components ด้วย Cypress

import { useCallback, useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = useCallback(() => setCount((x) => x + 1), [])
  const decrement = useCallback(() => setCount((x) => x - 1), [])

  return (
    <div>
      <h1>Count: {count}</h1>
      <button id='incrementButton' onClick={increment}>
        -
      </button>
      <button id='decrementButton' onClick={decrement}>
        +
      </button>
    </div>
  )
}

export default Counter

import React from 'react'
import Counter from './counter'

describe('<Counter />', () => {
  it('renders', () => {
    cy.mount(<Counter />)

    cy.get('h1').contains('Count')
  })
})

import React from 'react'
import Counter from './counter'

describe('<Counter />', () => {
  it('renders', () => {
    cy.mount(<Counter />)

    cy.get('h1').contains('Count: 0')

    cy.get('#incrementButton').click()

    cy.get('h1').contains('Count: 1')
  })
})

import { useCallback, useState } from "react"

const useCounter = () => {
  const [count, setCount] = useState(0)
  
  const increment = useCallback(() => setCount((x) => x + 1), [])
  const decrement = useCallback(() => setCount((x) => x - 1), [])

  return {
    count,
    increment,
    decrement
  }
}

export default useCounter

import useCounter from "./useCounter"

const Counter = () => {
  const { count, increment, decrement } = useCounter()

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
}

export default Counter

import React from 'react'
import Counter from './counter'
import useCounter, { UseCounterReturnType } from './useCounter'

describe('<Counter />', () => {
  it('renders', () => {
    cy.mount(<Counter />)

    cy.get('h1').contains('Count: 0')

    cy.get('#incrementButton').click()

    cy.get('h1').contains('Count: 1')
  })

})

import React from 'react'
import Counter from './counter'
import useCounter, { UseCounterReturnType } from './useCounter'

describe('<Counter />', () => {
  it('renders only useCounter', () => {
    // Arrange
    let counter: UseCounterReturnType

    const MockComponent = () => {
      counter = useCounter()
      return null
    }

    // Act
    cy.mount(<MockComponent />).then(() => {
      const count = counter.count

      // Assert
      expect(count).to.equal(0)
    })
  })
})