В моем текущем компоненте есть компоненты Collapse
и RadioGroup
. in
опора Collapse
компонента, связанного с состоянием. Когда я хочу изменить значение RadioGroup
с помощью onChange
prop, я получаю сообщение об ошибке. Поскольку in
prop компонента Collapse
равен 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