单击处理程序模拟函数未调用

Question

Component I want to test:

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

The test:

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

I would expect that a simulated click on the .pad element invokes the handleClick , and thus this.props.add would get called. But when I run the test, I get this error:

Expected mock function to have been called with: [1]

But it was not called

The app works when I test the app manually, so I guess there is something wrong with the way I try to test it.

EDIT: I found out how I can make the test pass: In Pad.js , also export the unwrapped component:

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

And in the test, use the unwrapped component instead of the connected one.

I still do not understand why it does not work when wrapping it in connect .

Answer 1

Seems like you are passing your handler to the container, not to the component. Whenever you simulate the click this is the method mapped to the props of your component which is called.

So you have two possibilities.

1) Redux helps you to seperate presentation from behaviour so you can extract your presentational component and test it seperatly. Your test will probably look something like:

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

Your component like this:

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) If you really want to test the integration component and container then you might be able to use something like redux-mock-store . That would allow you to verify the action fired through the dispatcher. You test would probably look something like that:

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),
  ]);
});

Also the mapStateToProps method from redux get a 2nd argument which are the own porps of the container. I would then make explicite that the value is passed through.

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

Hope this helps!