Question

我在学习如何使用自定义钩子测试 React 组件时遇到了困难。我认为这个问题与钩子模拟有关，但我不知道我做错了什么。我正在使用 jest 和 react-testing-library。

计数器.js

import React from 'react';
import useCounter from 'hooks/useCounter/useCounter';

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

  return (
    <div>
      Counter: <span data-testid='counter-value'>{count}</span>
      <button onClick={increment} data-testid='increment'>+1</button>
    </div>
  );
};


export default Counter;

useCounter.js

import {useState} from 'react';

export default () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  return {count, increment};
}

counter.test.js

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './counter';

describe('counter.js', () => {
  const mockIncrement = jest.fn();

  jest.mock('hooks/useCounter/useCounter', () => {
    return jest.fn(() => ({
      count: 0,
      increment: mockIncrement,
    }))
  })

  it('should call counter increment', () => {
    render(<Counter/>);
    const buttonElement = screen.getByTestId('increment');
    fireEvent.click(buttonElement);

    expect(mockIncrement).toBeCalled();
  })
})

错误信息：

  ● counter.js › should call counter increment

    expect(jest.fn()).toBeCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

Answer 1

您不需要在测试期间模拟钩子。您希望您的测试尽可能接近实际行为。

在这种情况下，只需单击按钮并检查计数值是否已更新为 DOM 中的预期值。

SELECT name, authorized, ROUND(total_outstanding / current_authorized * 100, 2) AS "Outstanding"
FROM (
    SELECT c.name
        ,sa.authorized
        ,SUM(css.total_outstanding) AS total_outstanding
        ,SUM(css.current_authorized) AS current_authorized
    FROM company c
    JOIN shares_authorized sa ON sa.stock_id = c.stock_id
    JOIN current_stock_stats css ON css.stock_id = sa.stock_id
    GROUP BY c.name, sa.authorized
) TMP
ORDER BY name, authorized

使用自定义钩子测试组件

1 个答案: