1

我当前的组件中有Collapse和RadioGroup组件。 绑定到状态in的组件的道具。Collapse当我想改变RadioGroupwith onChangeprop 的值时，我得到一个错误。因为组件in的 propCollapse等于 true，并且Collapse组件应该会出现。

此错误出现在测试模式下react-test-renderer

我的组件的一些行：

. . .
const [discountType, setDiscountType] = useState('total')
. . .
const handleChange = event => {
  setDiscountType(event.target.value)
}
. . .
  <RadioGroup value={discountType} onChange={handleChange}>
. . .
  <Collapse in={discountType === 'separate'}>
      . . .
  </Collapse>
. . .

测试文件：

const component = create(<MyComponent />)
const instance = component.root

it('MyComponent snapshot', () => {
  const tree = component.toJSON()
  expect(tree).toMatchSnapshot()
})

it('MyComponent handleChange correctly', () => {
  const value = 'separate'
  act(() => {
    instance.findByType(RadioGroup).props.onChange({ target: { value } }) // This line produces Error
    component.update(<MyComponent />)
  }
})

如您所见，错误发生在调用handleChange具有seperate值的函数之后。

TypeError: Cannot set property 'height' of undefined

at Object.handleEnter [as onEnter] (node_modules/@material-ui/core/Collapse/Collapse.js:106:23)
at Transition.performEnter (node_modules/react-transition-group/cjs/Transition.js:282:16)
at Transition.updateStatus (node_modules/react-transition-group/cjs/Transition.js:253:14)
at Transition.componentDidUpdate (node_modules/react-transition-group/cjs/Transition.js:215:10)
at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12232:22)
at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15354:7)
at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11758:14)
at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11807:16)
at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11860:31)
at commitRootImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15092:9)
at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:697:12)
at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2013:10)
at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14932:3)
at finishSyncRender (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14439:3)
at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14417:9)
at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2063:24
at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:697:12)
at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2013:10)
at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2058:7)
at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2046:3)
at batchedUpdates (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14460:7)
at act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17271:14)
at Object.<anonymous> (MyComponent.test.js) // My test file
4

0 回答 0