javascript - 当在 react 组件中作为 Prop 传递时，如何模拟函数并测试它们是否被调用？

Question

我正在关注此 stackoverflow 答案中的示例 - Test a React Component function with Jest .我有一个示例组件和测试设置。该组件在加载到 App.js 中时可以正常工作。

组件 -

import React, { PropTypes, Component } from 'react';

export default class ExampleModule extends Component {
  static propTypes = {
    onAction: PropTypes.func,
  }

  static defaultProps = {
  onAction: () => { console.log("In onAction"); }
}

doAction = () => {
  // do something else
  console.log('In do action');
  this.props.onAction();
}

render() {
  return(
    <div>
      <button className='action-btn' onClick=  {this.doAction.bind(this)}>Do action</button>
    </div>
  )
}
}

这是测试 -

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import ExampleComponent from './ExampleModule.js';

let Example;

describe('Example component', function() {
  beforeEach(function() {
    Example = TestUtils.renderIntoDocument(<ExampleComponent />);
  })

  it('calls props functions', function() {
    Example.doAction = jest.genMockFunction();
    let actionBtn = TestUtils.findRenderedDOMComponentWithClass(Example, 'action-btn');
    TestUtils.Simulate.click(actionBtn);
    expect(Example.doAction).toBeCalled();
  })

  it('doAction calls onAction', function() {
    expect(Example.props.onAction).not.toBeCalled();
    Example.doAction();
    expect(Example.props.onAction).toBeCalled();
  })
})

但是，我收到以下错误 -

FAIL  src/App/components/Example/ExampleModule.test.js
  Console

    console.log src/App/components/Example/ExampleModule.js:14
      In do action
    console.log src/App/components/Example/ExampleModule.js:24
      In onAction

  Example component › calls props functions

    Expected the mock function to be called.

      at Object.<anonymous> (src/App/components/Example/ExampleModule.test.js:17:30)
      at process._tickCallback (node.js:369:9)

  Example component › doAction calls onAction

    toBeCalled matcher can only be used on a spy or mock function.

      at Object.<anonymous> (src/App/components/Example/ExampleModule.test.js:21:40)
      at process._tickCallback (node.js:369:9)

即使我想模拟 doAction，我也可以看到正在调用 doAction 和 onAction 中的 console.logs。 此外，我无法模拟 onAction。我收到这个错误 -

TypeError: Cannot assign to read only property 'onAction' of #<Object>

我试过 jest.fn() 但得到了同样的错误。

我如何模拟这些函数并测试它们？

编辑:

我能够通过以下方式使用 jest.fn() 来模拟 doAction -

let mockFn = jest.fn();
Example.doAction = mockFn()

但是，我仍然无法模拟 Example.props.onAction。

Answer 1

在你渲染文档的测试中，你需要传递一个模拟函数，你可以稍后观察它是否被调用，就像这样 -

let onActionMock = jest.fn();

beforeAll(function() {
  Example = TestUtils.renderIntoDocument(<ExampleComponent onAction={onActionMock}/>);
});

beforeEach(function() {
  onActionMock.mockClear();
});

it('doAction calls onAction', () => {
  Example.doAction();
  expect(onActionMock).toBeCalled();
});

您可以进一步测试该函数的调用方式 -

expect(onActionMock).toBeCalledWith('Some argument');

希望这对您有所帮助。