0

我试图找出模拟我的一个组件正在使用的自定义钩子的不同返回值的最佳方法。不是我的组件/钩子，而是为了说明：

/hooks/useCount.js

export function useCount() {
  // does something to determine the count
  return { count }
}

/components/ListItems.js

export function ListItems(props) {
  const { count } = useCount()

  const visibleItems = props.items.slice(0, count)

  return (
    <div>
      {visibleItems.map((item) => (
        <li>item</li>
      ))}
    </div>
  )
}

/components/测试/ListItems.js

import { useCount } from '../../hooks/useCount'
import { ListItems } from '../ListItems'

const fruits = [
  'Apple',
  'Banana',
  'Cherry',
  'Dragonfruit',
  'Elderberry',
  'Fig',
  'Grape',
  'Huckleberry',
  'Icaco',
  'Jujube',
]

// I want to provide a default return value because most
// test cases will account for all list items being rendered
const mockCount = useCount.jest
  .fn()
  .mockReturnValue({ count: fruits.length + 1 })

describe(ListItems, () => {
  test('renders all items if count is greater than number of items', () => {
    const { getByText } = render(<ListItems items={fruits} />)

    expect(getByText(fruits[0])).toBeInTheDocument()
    expect(getByText(fruits[1])).toBeInTheDocument()
    expect(getByText(fruits[2])).toBeInTheDocument()
    expect(getByText(fruits[3])).toBeInTheDocument()
    expect(getByText(fruits[4])).toBeInTheDocument()
    expect(getByText(fruits[5])).toBeInTheDocument()
    expect(getByText(fruits[6])).toBeInTheDocument()
    expect(getByText(fruits[7])).toBeInTheDocument()
    expect(getByText(fruits[8])).toBeInTheDocument()
    expect(getByText(fruits[9])).toBeInTheDocument()
  })

  test('renders the correct items if count is less than the number of items', () => {
    useCount.mockReturnValueOnce({ count: 5 }) // I also want to specify a unique "count"s like this for some test cases
    const { getByText } = render(<ListItems items={fruits} />)

    expect(getByText(fruits[0])).toBeInTheDocument()
    expect(getByText(fruits[1])).toBeInTheDocument()
    expect(getByText(fruits[2])).toBeInTheDocument()
    expect(getByText(fruits[3])).toBeInTheDocument()
    expect(getByText(fruits[4])).toBeInTheDocument()
    expect(getByText(fruits[5])).not.toBeInTheDocument()
    expect(getByText(fruits[6])).not.toBeInTheDocument()
    expect(getByText(fruits[7])).not.toBeInTheDocument()
    expect(getByText(fruits[8])).not.toBeInTheDocument()
    expect(getByText(fruits[9])).not.toBeInTheDocument()
  })
})

这甚至是正确的方法吗？我应该使用模拟实现吗？还是以某种方式进行间谍活动？我的mockReturnValueOnce()功能和流程也有问题，所以如果可以通过解决方案考虑到这一点，我将更加感激。

4

0 回答 0