reactjs - 测试子组件具有上下文的组件

Question

我antd Checkbox在我的组件中使用该组件CheckboxWidget，该组件有一个contextType定义：

static contextTypes: {
   checkboxGroup: any
}

我想使用shallow酶渲染来测试它，所以我在块内部使用了withContext助手：recomposebeforeEach

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()isSubject和wrapper.instance().children未定义。我尝试使用wrapper.dive，但似乎wrapper.instance()两者都不起作用。

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