断言函数改变了一个有状态值

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"));
})

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

Answer 1

文档中有一个示例，请参见更新。

注意:更新有一个问题。renderHook在更新发生时改变了current的值，所以你不能解构它的值，因为赋值会在那个时候复制锁定该值。

所以正确的方法是:

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  stackoverflow/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