用玩笑进行测试时如何在对象道具中进行间谍模拟功能？答案

【问题标题】：How spy mock function in object props when tests with jest?用玩笑进行测试时如何在对象道具中进行间谍模拟功能？
【发布时间】：2020-02-21 18:06:31
【问题描述】：

我在两个模拟函数中有一个道具模拟对象。我需要监视他们两个，但我不知道如何监视。

这是一个例子：

myComponent.js

function Package(props) {
  const { lockUI } = props
  lockUI.set();
  // ...
}

myComponent.test.js

import React from 'react';
import Package from 'src/Package';
import { cleanup, render } from '@testing-library/react';

describe('Package Unit Test', () => {
    let props;

    beforeEach(() => {
        props = {
            lockUI                                 : {
                set   : jest.fn(),
                unset : jest.fn(),
            },
        };
    });

    afterEach(cleanup);

    test('testing example', () => {
        render(<Package {...props} />);
        expect(props.lockUI.set).toHaveBeenCalledTimes(1);
    });
});

响应控制台：

 Expected number of calls: 1
 Received number of calls: 0

【问题讨论】：

标签： reactjs testing jestjs react-testing-library

【解决方案1】：

你只需要先声明 setSpy 和 unsetSpy 并将它们插入到组件中

import React from 'react';
import Package from 'src/Package';
import { cleanup, render } from '@testing-library/react';

describe('Package Unit Test', () => {
    const setSpy = jest.fn();
    const unsetSpy = jest.fn();
    let props;

    beforeEach(() => {
        props = {
            lockUI                                 : {
                set   : setSpy,
                unset : unsetSpy,
            },
        };
    });

    afterEach(cleanup);

    test('testing example', () => {
        render(<Package {...props} />);
        expect(setSpy).toHaveBeenCalledTimes(1);
    });
});

【讨论】：