在自定义钩子测试中，状态与初始值没有变化

Question

我正在使用 Jest 和 React 测试库测试我的自定义挂钩。

在自定义钩子测试中，我尝试更改状态值并进行测试，但它与初始值不同。

我将通过示例详细解释它。

首先，看一下我的自定义钩子和测试代码。

这是我的自定义挂钩。

自定义挂钩

import * as React from 'react';

export const useCount = () => {
  const [count, setCount] = React.useState(100);

  const increment = () => {
    console.log(count, 'inside increment');
    setCount(count + 1)
  }
  const decrement = () => {
    console.log(count, 'inside decrement');
    setCount(count - 1)
  }

  return { count, setCount, increment, decrement }
}

这是测试代码。

测试代码

import React from 'react';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';
import { fireEvent, render } from '@testing-library/react';
import { act, renderHook } from '@testing-library/react-hooks';

import { useCount } from '../src/usecase/useCount';

describe('test', () => {
  test('test', () => {
    const { result, rerender } = renderHook(() => useCount());
    act(() => {
      result.current.setCount(0);
      result.current.increment();
    })
    expect(result.current.count).toBe(1) // In this line, I hope count is 1 but it is 101 because initial value is 100 and it was added to 1.
  })
});

count初始为100，increase方法从计数当前值向count加1。

所以我希望测试代码中的score为1。因为在测试代码中先设置了score0，然后通过increase方法将分数加1。

Answer 1

因为您在同一渲染中更改了 initialValue 和运行函数。所以预期将成为你的 init (100) + 1 @testing-library

在测试代码中你可以像这样放置它们

...

describe('test', () => {
  test('test', () => {
    const { result, rerender } = renderHook(() => useCount());
      
    //run setCount to change initial value
    act(() => {
    result.current.setCount(0);
  })

  // make it rerender
    rerender()
  
  // run your count
    act(() => {
      result.current.increment();
    })
    expect(result.current.count).toBe(1) // In this line, I hope count is 1 but it is 101 because initial value is 100 and it was added to 1.
  })
});

...

在自定义钩子测试中，状态与初始值没有变化

In the custom hook test, the state is not changed from the initial value

reactjs

jestjs

react-testing-library