reactjs


How do I test props passed to child component using Enzyme Shallow?


I'm having an issue testing my component which thinly wraps the Material-UI autocomplete. In my test, I'd like to view the props being passed to , but my console statement is an empty object. I'm using Enzyme's shallow method to render this. Here's my code:
const underlineFocusStyle = {
display: 'block',
height: '100%',
outline: 'none',
position: 'relative',
padding: '0px',
width: '100%',
border: 'none',
backgroundColor: 'rgba(0, 0, 0, 0)',
cursor: 'inherit',
opacity: '1'
};
export class MyAutoComplete extends React.Component {
render() {
let { muiTheme, forceOpenOnFocus, ...propsToApply } = this.props;
propsToApply.underlineFocusStyle = underlineFocusStyle;
if (forceOpenOnFocus) {
if (!propsToApply.filter) {
propsToApply.filter = ((searchText, key) => {
return searchText === '' || AutoComplete.defaultProps.filter(searchText, key);
});
}
}
return <AutoComplete name={'autocomplete'} {...propsToApply} />;
}
}
MyAutoComplete .propTypes = {
muiTheme: PropTypes.object,
forceOpenOnFocus: PropTypes.bool
}
export default muiThemeable()(MyAutoComplete );
And my test:
describe('LLamasoftAutoComplete', () => {
const muiTheme = getMuiTheme();
const shallowWithContext = (node) => shallow(node, {context: {muiTheme}});
it('should pass in ', () => {
const wrapper = shallowWithContext(
<LLamasoftAutoComplete
muiTheme={muiTheme}
forceOpenOnFocus={true}
dataSource={['One', 'Two', 'Three']} />
);
console.log(wrapper.find('AutoComplete').props()); // is {}
expect(true).toBe(false);
});
});
As you may already know, shallow rendering a component "one level deep". Also, I assume that you are familiar with the concept of HOC.(Higher-Order components). Your MyAutoComplete wrapped with muiThemeable HOC. So shallow rendering only render the muiThemeable and it doesn't render what you have inside MyAutoComplete's render method. Because those are deep in the component tree more than one level.
To avoid this problem we usually test undecorated component; the original component before wrapping with HOC. So we need to export both decorated and undecorated component from the file, decorated one as a default export and undecorated one as a named export.
export default muiThemeable()(MyAutoComplete);
export { MyAutoComplete };
Now you can import undecorated one and test it. In you case, you don't actually need to render it with context since you no longer have muiThemeable in your component, which depends on context. So your test becomes simpler.
import { MyAutoComplete as LLamasoftAutoComplete} from './your/file/location'
describe('LLamasoftAutoComplete', () => {
const muiTheme = getMuiTheme();
it('should pass in ', () => {
const wrapper = shallowWithContext(
<LLamasoftAutoComplete
muiTheme={muiTheme}
forceOpenOnFocus={true}
dataSource={['One', 'Two', 'Three']} />
);
console.log(wrapper.find('AutoComplete').props());
expect(true).toBe(false);
});
});
Read answers to this question for more info: How to test decorated React component with shallow rendering

Related Links

Update a nested value in a store
react component test cannot find text
Getting error when importing a react component: required is not defined
Foundation, React throw “el.data(…).split is not a function” when click on toggle button
Why webpack includes elliptic bn.js modules in my bundle
React component function
Reactjs multiple form submit
Dynamic Role Based Routing (React-Router)
Using `“homepage”` in package.json, without messing up paths for localhost
Setting up react and express
vscode react+typescript + mocha: breakpoints not hit
React-Virtualized: Infinitely scrolling list
Reusing Reducer Logic does not toggle object using Redux and React'
How should I organize my application?
Pass params with Link react
npm start sb-admin-reactjs on command prompt

Categories

HOME
qlikview
oop
ssms
stata
botframework
itunesconnect
aix
multipartform-data
wkhtmltopdf
kairosdb
opendaylight
bookmarklet
template10
glibc
git-branch
xna
ecmascript-2017
pydub
marionette
apm
foxpro
favorites
flickr
offset
repeat
extern
rythm
stencyl
word-wrap
mediastream
usernotifications
socketcluster
autodesk-data-management
taleo
text-formatting
xmldom
remap
flask-socketio
e4
xamarin-test-cloud
kendo-scheduler
blackberry
disassembly
blackberry-webworks
visual-web-developer
cosign-api
scriptengine
sprockets
gdi
stdlist
alchemy
cascading
kramdown
traminer
vspackage
glog
grails-3.0.9
minko
accpac
cl.exe
qxorm
pysvn
drools-guvnor
aiff
diffmerge
nest-initiative
hotlinking
node-mongodb-native
nativequery
nop
kendo-window
proj4
idoc
m3u
netzke
animationdrawable
mvcmailer
facebook-winjs-sdk
ruby-1.9
youtube.net-api
for-xml
appointment
ihtmldocument2
opengl-to-opengles

Resources

Encrypt Message