React 函数组件中的模拟引用

Question

我有一个 React 函数组件，它的子组件之一有一个引用。参考是通过

useRef

创建的。

我想用浅渲染器测试组件。我必须以某种方式模拟 ref 来测试其余的功能。

我似乎找不到任何方法来访问此引用并嘲笑它。我尝试过的事情

• 通过子属性访问它。 React 不喜欢这样，因为 ref 并不是真正的 props

• 模拟使用参考。我尝试了多种方法，但只有当我的实现使用

  React.useRef

时才能让它与间谍一起工作

我看不出有任何其他方法可以让裁判嘲笑它。在这种情况下我必须使用 mount 吗？

我无法发布真实场景，但我构建了一个小例子

it('should test', () => {
    const mock = jest.fn();
    const component = shallow(<Comp onHandle={mock}/>);


    // @ts-ignore
    component.find('button').invoke('onClick')();

    expect(mock).toHaveBeenCalled();
});

const Comp = ({onHandle}: any) => {
    const ref = useRef(null);

    const handleClick = () => {
        if (!ref.current) return;

        onHandle();
    };

    return (<button ref={ref} onClick={handleClick}>test</button>);
};

Answer 1

这是我的单元测试策略，使用

jest.spyOn

方法监视

useRef

钩子。

index.tsx

：

import React from 'react';

export const Comp = ({ onHandle }: any) => {
  const ref = React.useRef(null);

  const handleClick = () => {
    if (!ref.current) return;

    onHandle();
  };

  return (
    <button ref={ref} onClick={handleClick}>
      test
    </button>
  );
};

index.spec.tsx

：

import React from 'react';
import { shallow } from 'enzyme';
import { Comp } from './';

describe('Comp', () => {
  afterEach(() => {
    jest.restoreAllMocks();
  });
  it('should do nothing if ref does not exist', () => {
    const useRefSpy = jest.spyOn(React, 'useRef').mockReturnValueOnce({ current: null });
    const component = shallow(<Comp></Comp>);
    component.find('button').simulate('click');
    expect(useRefSpy).toBeCalledWith(null);
  });

  it('should handle click', () => {
    const useRefSpy = jest.spyOn(React, 'useRef').mockReturnValueOnce({ current: document.createElement('button') });
    const mock = jest.fn();
    const component = shallow(<Comp onHandle={mock}></Comp>);
    component.find('button').simulate('click');
    expect(useRefSpy).toBeCalledWith(null);
    expect(mock).toBeCalledTimes(1);
  });
});

100%覆盖率的单元测试结果：

 PASS  src/stackoverflow/57805917/index.spec.tsx
  Comp
    ✓ should do nothing if ref does not exist (16ms)
    ✓ should handle click (3ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        4.787s, estimated 11s

源代码：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/57805917

Answer 2

slideshowp2 的解决方案对我不起作用，所以最终使用了不同的方法：

通过

解决了这个问题

1. 引入一个 useRef 可选属性，默认情况下使用 React 的一个

import React, { useRef as defaultUseRef } from 'react'
const component = ({ useRef = defaultUseRef }) => {
  const ref = useRef(null)
  return <RefComponent ref={ref} />
}

2. 在测试模拟中使用Ref

const mockUseRef = (obj: any) => () => Object.defineProperty({}, 'current', {
  get: () => obj,
  set: () => {}
})

// in your test
...
    const useRef = mockUseRef({ refFunction: jest.fn() })
    render(
      <ScanBarcodeView onScan={handleScan} useRef={useRef} />,
    )
...

Answer 3

如果您在组件的嵌套钩子中使用

ref

，并且您始终需要特定的

current

值，而不仅仅是第一个渲染器。您可以在测试中使用以下选项：

const reference = { current: null };
Object.defineProperty(reference, "current", {
    get: jest.fn(() => null),
    set: jest.fn(() => null),
});
const useReferenceSpy = jest.spyOn(React, "useRef").mockReturnValue(reference);

并且不要忘记在组件中写入

useRef

，如下所示

const ref = React.useRef(null)

Answer 4

我无法获得一些工作答案，因此我最终将 useRef 移至其自己的函数中，然后模拟该函数：

// imports the refCaller from this file which then be more easily mocked
import { refCaller as importedRefCaller } from "./current-file";

// Is exported so it can then be imported within the same file
/**
* Used to more easily mock ref
* @returns ref current
*/
export const refCaller = (ref) => {
    return ref.current;
};

const Comp = () => {
    const ref = useRef(null);

    const functionThatUsesRef= () => {
        if (importedRefCaller(ref).thing==="Whatever") {
            doThing();
        };
    }

    return (<button ref={ref}>test</button>);
};

然后进行简单的测试：

const currentFile= require("path-to/current-file");

it("Should trigger do the thing", () => {
    let refMock = jest.spyOn(fileExplorer, "refCaller");
    refMock.mockImplementation((ref) => {
        return { thing: "Whatever" };
    });

此后的任何内容都将与模拟函数一起执行。

有关模拟函数的更多信息，我发现： https://pawelgrzybek.com/mocking-functions-and-modules-with-jest/ 和 开玩笑模拟内部函数有帮助

Answer 5

您可以使用 renderHook 并将其作为组件的引用传递。这是一个例子。

    it('should show and hide using imperative handle methods', async () => {
    const ref = renderHook(() => useRef<OverlayDropdownRef>(null)).result.current;

    renderWithContext(
        <OverlayDropdown
            {...overlayDropdownMock}
            ref={ref}
            testID={overlayDropdownId}
        />
    );

    // Show the modal
    ref?.current?.show();
    expect(screen.getByTestId(modalId)).toBeOnTheScreen();

    // Hide the modal
    ref?.current?.hide();
    expect(screen.queryByTestId(modalId)).not.toBeOnTheScreen();
});