1

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

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，它保持为假。我不确定为什么它不更新，除非act它不做它正在做的事情？

4

1 回答 1

0

从文档更新：

注意：有一个更新问题。改变更新发生时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
于 2022-01-04T09:17:52.977 回答