So I've searched for an answer and have yet to find one that fits my use case. I'm a little new to testing with Jest/Enzyme and very new to testing with recompose.
I don't know how to test my functional Component, which is created using recompose. I can't seem to figure out how to access the props (state and handler functions) in my test.
Here's an example of my functional Component, I'll call UserDetails
const UserDetails = ({
userInfo,
onUserInfoUpdate,
className,
error,
title,
primaryBtnTitle,
submit,
secondaryBtnTitle,
secondaryBtnFunc,
...props
}) => (
<div className={className}>
<div className="user-details-body">
<Section title="User details">
<TextInput
caption="First Name"
value={userInfo.first}
onChange={onUserInfoUpdate('first')}
name="first-name"
min="1"
max="30"
autoComplete="first-name"
/>
<TextInput
caption="Last Name"
value={userInfo.last}
onChange={onUserInfoUpdate('last')}
name="last-name"
min="1"
max="30"
autoComplete="last-name"
/>
</Section>
</div>
<div className="errorBar">
{error && <Alert type="danger">{error}</Alert>}
</div>
<ActionBar>
<ButtonGroup>
<Button type="secondary" onClick={secondaryBtnFunc}>
{secondaryBtnTitle}
</Button>
<Button type="primary" onClick={submit}>
{primaryBtnTitle}
</Button>
</ButtonGroup>
</ActionBar>
</div>
Here is example code of my index.js file that composes my withState and withHandlers to my Component:
import UserDetails from './UserDetails'
import { withState, withHandlers, compose } from 'recompose'
export default compose(
withState('error', 'updateError', ''),
withState('userInfo', 'updateUserInfo', {
first: '',
last: '',
}),
withHandlers({
onUserInfoUpdate: ({ userInfo, updateUserInfo }) => key => e => {
e.preventDefault()
updateCardInfo({
...cardInfo,
[key]: e.target.value,
})
},
submit: ({ userInfo, submitUserInfo }) => key => e => {
e.preventDefault()
submitUserInfo(userInfo)
//submitUserInfo is a graphQL mutation
})
}
})
)
Now I'm trying to write tests for this component. I import the index file that has the Component wrapped to create an HOC.
import React from 'react'
import renderer from 'react-test-renderer'
import { mount, shallow } from 'enzyme'
import UserDetails from './'
describe('UserDetails Element', () => {
it('test', () => {
const tree = mount( <UserDetails /> )
console.log(tree.props());
})
})
The console log gives me this in the terminal
{ children:
{ '$$typeof': Symbol(react.element),
type:
{ [Function: WithState]
displayName: 'withState(withState(withHandlers((UserDetails)))))' },
key: null,
ref: null,
props: {},
_owner: null,
_store: {} } }
I get the same output if I console.log tree.props('userInfo')
. I get undefined if I console.log tree.prop('userInfo')
or tree.props().userInfo
Also, when I try to use my handlers in the test file, I get an error that the method is undefined.
Where am I going wrong? Thanks!
Aucun commentaire:
Enregistrer un commentaire