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

Question

我在 CheckboxWidget 组件中使用 antd Checkbox 组件，组件 has a contextType defined:

static contextTypes: {
   checkboxGroup: any
}

我想使用 shallow 酶渲染来测试它，所以我在 beforeEach 块内使用来自 recompose 的 withContext 助手：

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 但它似乎也不适用于 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)
})

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

Testing a component whose child has a context

reactjs

jestjs

enzyme

recompose

antd