Question

我正在使用antd Checkbox组件中的CheckboxWidget组件，组件has a contextType defined：

static contextTypes: {
   checkboxGroup: any
}

我想使用shallow使用酶进行渲染来测试它，因此我使用withContext块内recompose的{{1}}帮助器：

beforeEach

然而，当我像这样编写测试时：

describe('Simple Checkbox Widget', () => {
  beforeEach(() => {
    withContext({
      getChildContext: function () {
        return {checkboxGroup: null}
      },
      childContextTypes: {
        checkboxGroup: shape({
          disabled: bool,
          toggleOption: func,
          value: array
        })
      }
    })(CheckboxWidget)
  })
})

我注意到测试失败了，因为找不到it('renders a checkbox from Antd', () => { const wrapper = shallow(<Subject />) const actual = wrapper.find(AntdCheckbox).length const expected = 1 expect(actual).toEqual(expected) })小部件。我认为这是因为渲染的组件看起来像：

Checkbox

我发现<Subject />为wrapper.instance()且Subject未定义。我尝试使用wrapper.instance().children，但它似乎也没有在wrapper.dive上工作。

Answer 1

有一种更简单的方法可以将某些内容放入上下文中。 shallow函数接受选项作为第二个参数。在选项中，您可以传递组件的上下文：

it('renders a checkbox from Antd', () = > {
  const wrapper = shallow( < Subject / > , {
    context: {
      checkboxGroup: checkboxGroup: shape({
        disabled: bool,
        toggleOption: func,
        value: array
      })
    }
  })
  const actual = wrapper.find('AntdCheckbox').length
  const expected = 1
  expect(actual).toEqual(expected)
})

测试其子项具有上下文的组件

1 个答案: