使用act不更新状态？

Question

我有一个像这样的定制钩子：

import { useState } from 'react';

export default function useOpenClose(initial = false) {
    const [isOpen, setOpen] = useState(initial);

    const open = () => { setOpen(true); }
    const close = () => { setOpen(false); }

    return [isOpen, { open, close } ];
}

至于我的测试，我有这样的想法：

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

describe('useOpenClose', () => {
    const { result: { current } } = renderHook(() => useOpenClose());
    const [isOpen, { open, close }] = current;

    test('Should have an open function', () => {
        expect(open).toBeInstanceOf(Function)
    });

    test('Should have an open function', () => {
        expect(close).toBeInstanceOf(Function)
    });

    test('Should have initial value of false', () => {
        expect(isOpen).toBe(false);
    });

    test('Should update value to true', () => {
        act(() => open());
        console.log(isOpen)
    })
});

在测试“应将值更新为true”的地方，当我记录isOpen时，它将保持为false。我不太清楚为什么它不更新，除非act没有做它正在做的事情？

Answer 1

来自更新医生

注意到：有一个有更新的问题。当更新发生时，renderHook会改变current的值，因此不能对其值进行重构，因为赋值将使副本锁定到该值。

例如。

useOpenClose.ts

import { useState } from 'react';

export default function useOpenClose(initial = false) {
  const [isOpen, setOpen] = useState(initial);

  const open = () => {
    setOpen(true);
  };
  const close = () => {
    setOpen(false);
  };

  return [isOpen, { open, close }] as const;
}

useOpenClose.test.ts

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

describe('useOpenClose', () => {
  test('should pass', () => {
    const { result } = renderHook(() => useOpenClose());
    // Don't destructure `result`.
    expect(result.current[1].open).toBeInstanceOf(Function);
    expect(result.current[1].close).toBeInstanceOf(Function);
    expect(result.current[0]).toBe(false);
    act(() => result.current[1].open());
    console.log(result.current[0]);
  });
});

测试结果：

 PASS  examples/57315042/useOpenClose.test.ts (13.635 s)
  useOpenClose
    ✓ should pass (45 ms)

  console.log
    true

      at Object.<anonymous> (examples/57315042/useOpenClose.test.ts:12:13)

-----------------|---------|----------|---------|---------|-------------------
File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------|---------|----------|---------|---------|-------------------
All files        |    87.5 |      100 |   66.67 |    87.5 |                   
 useOpenClose.ts |    87.5 |      100 |   66.67 |    87.5 | 10                
-----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        15.588 s