（React 组件测试）如果使用 jasmine 在 componentDidMount 中调用来自不同模块的函数，如何进行单元测试答案

【问题标题】：(React Component Tests) How to unit test if a function from a different module is called in componentDidMount using jasmine（React 组件测试）如果使用 jasmine 在 componentDidMount 中调用来自不同模块的函数，如何进行单元测试
【发布时间】：2018-07-21 15:25:45
【问题描述】：

我正在为 React 组件编写单元测试。如何编写单元测试来检查来自不同模块的函数是否在 jasmine 的 componentDidMount 中被调用。这是我的组件：

import {differentModuleFunc} from "someModule";
class MyComponent extends React.Component {

    componentDidMount() {
        differentModuleFunc();
    }

    render() {
        return 
            <div>
               TestDiv
            </div>;
    }
 }

我的组件单元测试如下：

describe("MyComponent", () => {
    it("differentModuleFunc should have been called", (done) => {
        const spy = spyOn(MyComponent, "differentModuleFunc");
        myComponentDiv = TestUtils.renderIntoDocument(<MyComponent/>);
        expect(myComponentDiv).toBeDefined();
        expect(spy).toHaveBeenCalled();
    });
});

谢谢。

【问题讨论】：

标签： reactjs unit-testing testing jasmine

【解决方案1】：

您可以模拟该函数，然后断言调用计数。使用您的示例，您可以执行以下操作：

import {differentModuleFunc} from "someModule";
class MyComponent extends React.Component {

    componentDidMount() {
        differentModuleFunc();
    }

    render() {
        return 
            <div>
               TestDiv
            </div>;
    }
 }

您在测试中导入“someModule”，模拟它，然后断言调用计数。

import {differentModuleFunc} from "someModule"; // import the function

jest.mock('someModule', () => ({ differentModuleFunc: jest.fn() })) // mocks the function

describe("MyComponent", () => {
    it("differentModuleFunc should have been called", (done) => {
        const spy = spyOn(MyComponent, "differentModuleFunc");
        myComponentDiv = TestUtils.renderIntoDocument(<MyComponent/>);
        expect(myComponentDiv).toBeDefined();
        expect(spy).toHaveBeenCalled();
        expect(differentModuleFunc.mock.calls.length).toBe(1) // assert call count
    });
});

【讨论】：