1

我有一个使用 Enzyme 浅层渲染测试的 SFC。我将带有内联样式的样式对象作为道具传递给这个无状态组件。但是，当我对其应用单元测试时，它返回未定义。我不确定这是否可以，因为我知道这个组件只是返回作为道具传递给它的任何东西，并且没有任何东西被传递/渲染，它给了我未定义的东西。有什么解决方法吗？

const LoginForm = ({ style, handleSubmit }) => {
  return (
    <form onSubmit={handleSubmit}>
      <div style={_.get(style, 'container')}>
        {inputFields}
      </div>
    </form>
  );
};

测试：

it('should apply styles to first div', () => {
        const wrapper = shallow(<LoginForm style={{display: 'inline'}}/>);
        expect(wrapper.find('div').first().prop('style')).to.eql({display: 'inline'});
      });
4

1 回答 1

2

这会失败有几个原因。

首先，您似乎错误地使用了 Enzyme 浅包装 API。

如果您想从浅包装器中获取特定的道具，则需要使用.props()（换句话说，您忘记了“s”）。

wrapper.find('div').first().props('style')

但是，即使进行了此更正，您的测试仍然会失败，因为在您的测试中，您{display: 'inline'}作为style道具传递，但您正在寻找container在您的实现中调用的属性。我假设您正在使用lodash.get，它在 object 的路径上获取值。由于您提供的对象没有container属性，因此 div 的styleprop 将等于{style: undefined}，并且在尝试将其与{display: 'inline'}

于 2016-08-12T22:13:23.710 回答