Question

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

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

Answer 1

有几个原因导致失败的原因。

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

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

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

但是，即使进行了此更正，您的测试仍然会失败，因为在您的测试中，您将{display: 'inline'}作为style道具传递，但您正在寻找名为{{ 1}}在你的实现中。我假设您使用container gets the value at the path of an object。由于您提供的对象没有lodash.get属性，div的container道具将等于style，并且在尝试将此项与{{{}}进行比较时测试将失败1}}

酶：无状态功能组件返回未定义的道具

1 个答案: