單擊處理程序模擬函數未調用

Question

我要測試的組件：

import React from 'react';
import { connect } from 'react-redux';
import { actionCreators as calculatorActionCreators } from './calculator';

class Pad extends React.Component {
  handleClick = () => {
    this.props.add(this.props.value);
  };
  render() {
    return (
      <div className="pad" onClick={this.handleClick}>
        {this.props.display}
      </div>
    );
  }
}

const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({
  add: val => dispatch(calculatorActionCreators.addExpression(val)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Pad);

考試：

import React from 'react';
import store from './store';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import Pad from './Pad';
it('adds calculation steps', () => {
  const mockAdd = jest.fn();
  const value = 1;
  const element = mount(
    <Pad
      store={store}
      value={value}
      add={mockAdd}
    />
  );
  const clickable = element.find('.pad');
  clickable.simulate('click');
  expect(mockAdd).toHaveBeenCalledWith(value);
});

我希望對.pad元素的模擬點擊會調用handleClick ，因此this.props.add將被調用。 但是當我運行測試時，出現以下錯誤：

預期的模擬函數已被調用：[1]

但這沒有被稱為

當我手動測試應用程序時，該應用程序可以正常工作，因此我想我嘗試對其進行測試的方式有問題。

編輯：我發現了如何使測試通過：在Pad.js ，還導出了未包裝的組件：

export class UnwrappedPad extends React.Component {
    ...
}
...
export default connect(mapStateToProps, mapDispatchToProps)(UnwrappedPad);

並且在測試中，使用展開的組件而不是連接的組件。

我仍然不明白為什么將它包裝在connect時不起作用。

Answer 1

好像您是將處理程序傳遞給容器，而不是傳遞給組件。 每當您模擬點擊時，這就是映射到組件的props的方法，該方法稱為。

因此，您有兩種可能性。

1）Redux幫助您將演示文稿與行為分開，因此您可以提取演示文稿組件並對其進行單獨測試。 您的測試可能看起來像：

it('adds calculation steps', () => {
  const mockAdd = jest.fn();
  const value = 1;
  const element = mount(<Pad value={value} add={mockAdd}/>);
  const clickable = element.find('.pad');

  clickable.simulate('click');

  expect(mockAdd).toHaveBeenCalledWith(value);
});

您的組件是這樣的：

export class Pad extends React.Component {

  handleClick = () => {
    this.props.add(this.props.value);
  };

  render() {
    return (
      <div className="pad" onClick={this.handleClick}>
        {this.props.display}
      </div>
    );
  }
}

2）如果您確實要測試集成組件和容器，則可以使用redux-mock-store之類的東西。 這樣您就可以驗證通過調度程序觸發的操作。 您的測試可能看起來像這樣：

it('adds calculation steps', () => {
  const mockStore = configureStore([])
  const store = mockStore({})
  const value = 1;
  const element = mount(
    <Provider store={store}>
      <Pad value={value}/>
    </Provider>
  );

  const clickable = element.find('.pad');

  clickable.simulate('click');

  expect(store.getActions()).toHaveBeenCalledWith([
    calculatorActionCreators.addExpression(val),
  ]);
});

同樣，來自redux的mapStateToProps方法也獲得了第二個參數，它們是容器自己的容器。 然后，我將明確指出該值是通過的。

例如const mapStateToProps = (state, ownProps) => ({ value: ownProps.value});

希望這可以幫助！