断言函数更改有状态值

Question

所以，这是我的代码的简化版本。

这是我的自定义挂钩。

export const useStep = () => {
  const [step, setStep] = useState<Steps>("sending");

  const changeStep = (newStep: Steps) => setStep(newStep);

  return { step, changeStep };
}

这是我的测试文件

const { result } = renderHook(() => useStep());

const { step, changeStep, resetStep } = result.current;

...

it("should change step value when `changeStep` is called", async () => {
  expect(step).toBe("sending");

  changeStep("verifying");

  await waitFor(() => expect(step).toBe("verifying"));
})

我已经尝试了很多方法，但其中 none 似乎有效。 step 值保持为 'sending'

Answer 1

文档中有示例，参见Updates。

NOTE: There's a gotcha with updates. renderHook mutates the value of current when updates happen so you cannot destructure its values as the assignment will make a copy locking into the value at that time.

所以正确的做法是：

index.ts:

import { useState } from 'react';

type Steps = 'sending' | 'verifying';

export const useStep = () => {
  const [step, setStep] = useState<Steps>('sending');

  const changeStep = (newStep: Steps) => setStep(newStep);

  return { step, changeStep };
};

index.test.ts:

import { renderHook, act } from '@testing-library/react-hooks';
import { useStep } from '.';

describe('72209087', () => {
  it('should change step value when `changeStep` is called', async () => {
    const { result } = renderHook(useStep);
    expect(result.current.step).toBe('sending');
    act(() => {
      result.current.changeStep('verifying');
    });
    expect(result.current.step).toBe('verifying');
  });
});

测试结果：

 PASS  Whosebug/72209087/index.test.ts (25.293 s)
  72209087
    ✓ should change step value when `changeStep` is called (17 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        28.622 s

断言函数更改有状态值

Assert that a function changes a stateful value

typescript

reactjs

react-testing-library

react-hooks

react-hooks-testing-library