Question

我有以下单元测试：

const wrap = (props = {}) => shallow(<Col {...props} />).dive();

describe('Col', () => {
  it('should render a 100% wide div by default', () => {
    const wrapper = wrap();

    console.log(wrapper.unrendered.props);
    expect(wrapper.props().w).toBe(1);
    expect(wrapper.type().target).toBe('div');

返回的wrapper如下所示：

  ShallowWrapper {
    root: [Circular],
    unrendered:
     { '$$typeof': Symbol(react.element),
       type:
        { [Function: StyledComponent]
          withComponent: [Function: withComponent],
          contextTypes: [Object],
          displayName: 'styled.div',
          styledComponentId: 'sc-ifAKCX',
          attrs: undefined,
          componentStyle: [Object],
          warnTooManyClasses: [Function],
          target: 'div' },
       key: null,
       ref: null,
       props: { w: 1, children: undefined },
       _owner: null,
       _store: {} },

因此，我要为w测试的道具位于unrendered的{{1}}属性中，但不在包装器中。

我对这个未渲染的对象是什么以及为什么属性不在包装器上感到困惑。

Answer 1

未渲染的对象只是ShallowWrapper的实现细节。您可以通过检查ShallowWrapper的源代码来查看它是如何使用的：https://github.com/airbnb/enzyme/blob/91bf86183b08337a45c2415e89868ea46fae81c3/src/ShallowWrapper.js。

如果您要测试特定道具w，请使用道具（）API：http://airbnb.io/enzyme/docs/api/ShallowWrapper/props.html

您已经在记录unrendered的行下方的代码行中执行此操作。为了测试组件的目的，不要担心包装器的实现细节（当然，由于实现细节可能会发生变化，因此当然不会编写挖掘到未渲染的测试）。相反，依赖于公共API（在这种情况下为props()方法）。

prop是在浅层酶支持查询中未提出的

1 个答案: