Question

我正在使用Enzyme和Jest测试一个React应用程序。该应用程序具有一组代表API列表的复选框。每次单击此类复选框（触发onChange），其服务ID都会添加到应用程序的状态，以便对输入进行选中。

it.only('should check and uncheck services when clicked', () => {
  wrapper.setProps({ [{ id: 0, name: 'The Super API' }, { id: 1, name: 'Cool Villains Hub' }] })
  wrapper.setState({ checkedServicesIds: [] })

  // Gettings wrappers for each checkbox
  const input0 = wrapper.find(`input#service_ids_${0}`)
  const input1 = wrapper.find(`input#service_ids_${1}`)

  expect(input0.prop('checked')).toBe(false) // --> passes
  expect(input1.prop('checked')).toBe(false) // --> passes

  input0.simulate('change') // Here id: 0 is added to the array

  // wrapper.update() and/or input0.update() does nothing here

  expect(wrapper.state('checkedServicesIds')).toEqual([0]) // --> passes

  // Now here's the thing: the old wrapper did not update
  expect(wrapper.find(`input#service_ids_${0}`).prop('checked')).toBe(true) // --> passes
  expect(input0.prop('checked')).toBe(true) // --> Expected: true, Received: false !!!
})

规范：

update

我没有正确使用png吗？

Answer 1

我认为您需要更新包装器。

wrapper.update();

来自enzyme documentation：

强制重新渲染。如果某些外部因素可能正在某处更新组件的状态，则在检查渲染输出之前运行很有用。

注意：只能在也是根实例的包装实例上调用。

酶ReactWrapper未更新

1 个答案: