javascript - 测试 React Redux 注入(inject)的属性

Question

我有一个组件，如果属性errorMessage不为null，它就会呈现一个按钮。

class App extends Component {
  static propTypes = {
    // Injected by React Redux
    errorMessage: PropTypes.string,
    resetErrorMessage: PropTypes.func.isRequired,
  };

  renderErrorMessage() {
    const { errorMessage } = this.props;
    if (!errorMessage) return null;

    return (
      <p id="error-message">
        <b>{errorMessage}</b>{' '}
        <button id="dismiss" onClick={this.props.resetErrorMessage()}>
          Dismiss
        </button>
      </p>
    );
  }

  render() {
    return (
      <div className="app">
        {this.renderErrorMessage()}
      </div>
    );
  }
}

React Redux 注入(inject)的属性:

import { connect } from 'react-redux';
import App from '../components/App/App';

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

export default connect(mapStateToProps, {
  resetErrorMessage: () => ({
    type: 'RESET_ERROR_MESSAGE',
  })
})(App);

如您所见，我还有 resetErrorMessage 来清除 errorMessage:

const errorMessage = (state = null, action) => {
  const { type, error } = action;

  if (type === RESET_ERROR_MESSAGE) {
    return null;
  } else if (error) {
    return error;
  }

  return state;
};

如何测试我的组件并判断如果单击按钮则按钮隐藏，或者 errorMessage 不是 null 按钮显示？

我想要得到这样的东西:

const props = {
  errorMessage: 'Service Unavailable',
  resetErrorMessage,
};
it('renders error message', () => {
    const wrapper = shallow(<App {...props} />);
    expect(wrapper.find('#error-message').length).toBe(1);
    wrapper.find('#dismiss').simulate('click');
    expect(wrapper.find('#error-message').length).toBe(0);
  });

但现在我的问题是，如果我模拟点击关闭按钮 - 错误消息不会隐藏。

Answer 1

正如我在您删除的上一个问题中发布的那样，如果您想测试按钮点击，最好的选择是调用“未连接”组件。如果你想测试连接的组件，那么你必须像这样将一个模拟库传递给它。

 const wrapper = shallow(<App {...props} store={store} />);

因此，在您的测试中导入应用程序，然后将 ResetErrorMessage 函数作为模拟函数传递，就像您对 jest 所做的那样。

const resetErrorMessage = jest.fn(() => {});
const wrapper = shallow(<App {...props} resetErrorMessage={resetErrorMessage} />);

wrapper.find('#dismiss').simulate('click');
expect(resetErrorMessage).toHaveBeenCalled();

我的建议是仅当您想直接从存储更改进行操作时才测试连接的组件。