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注入的属性：

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

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

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

我的建议是，当您想直接从商店更改中进行操作时，只测试连接的组件。

测试由React Redux

1 个答案: