酶：无状态功能组件 returns undefined props

Question

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

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 shallow wrapper API。

如果你想从一个shallow wrapper中得到一个特定的prop，你需要使用.props()（换句话说，你忘记了's'）。

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

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

进行比较时会失败

酶：无状态功能组件 returns undefined props

Enzyme: Stateless Functional Component returns undefined props

unit-testing

reactjs

enzyme