unit-testing - 如何使用 Enzyme 在 React 组件中测试来自 ReactiveDict 的动作道具

Question

我正在开发一个使用ReactiveDict. 我的项目是使用 Meteor 构建的，具有 Mantra 规范。

我有一个名为Login. 这个概念是，当组件渲染时，ReactiveDict状态被清除，因为组件渲染没有错误。不过那很好。我的容器中有这段代码：

export const depsMapper = (context, actions) => ({
  context: () => context,
  loginUser:actions.login.loginUser,
  clearState: actions.globals.clearState
});

这些是组件将执行的操作。在我的组件中：

componentWillMount(){
    this.props.clearState('LOGIN_ERROR_MESSAGE');
}

最后，在我的测试代码中，我有：

it.only('should render a <Form/> component', () => {
   const loginWrapper = shallow(<Login/>);
   expect(loginWrapper.find(Form)).to.have.length(1);
 });

当我运行时npm test，它说，this.props.clearState不是一个函数。我该如何解决这个问题？提前致谢。

Answer 1

我认为清除卸载时的错误更方便？ReactiveDict 无论如何都不是持久的，因此 - 在卸载时清除状态 - 如果您刷新页面或卸载组件，错误将已经被清除。所以没有理由在安装之前清除状态。通常你会在 mantrajs 中做这样的事情：

export const composer = ({context, clearState}, onData) => {
  const {LocalState} = context();
  const error = LocalState.get('LOGIN_ERROR_MESSAGE');
  onData(null, {error});

  // return the function that clears the state and the state gets reset on unmount
  return clearState;
};

export const depsMapper = (context, actions) => ({
  context: () => context,
  loginUser: actions.login.loginUser,
  clearState: actions.globals.clearState
});

export default composeAll(
  composeWithTracker(composer),
  useDeps(depsMapper)
)(Login);