（React Component Tests）如何使用jasmine在componentDidMount中調用來自另一個模塊的函數的單元測試

Question

我正在為React Component編寫單元測試。 如何編寫單元測試以檢查來自不同模塊的函數是否在茉莉花的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(); }); }); 

謝謝。

Answer 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 }); });