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

Reactjs combine all the states to parent component
How to pass a function down the component's hierarchy without using props in React?
Meteor React createContainer rerender
Idiomatic way to chain redux state changes?
How to select unknown element in react native webview?
How to split props string in React?
TypeScript: Export React components as part of a namespace
How to find out what is initiating an (re)render in React
Get API response to a function and populate controls
Manage conflict between componentwillrecieveprops and onChange function
React-Dates in component using Redux
react-router - cannot GET url
Child components not updating in Safari. Works like a charm in Chrome and FF
react webpack app often got a blanc page after reload
Starting React app from scratch
Need an explaination to how react-image works

Categories

HOME
autohotkey
kendo-ui
pyspark
qemu
grpc
redhawksdr
swap
gnuradio
genexus
software-collections
phpexcel
aspectj
http-status-codes
logstash-configuration
console-application
owncloud
passbook
summernote
datasource
include-path
angular2-pipe
pumping-lemma
sphinx4
spring-data-gemfire
choco
openvms
machine-code
mootools
pygraphviz
stdin
blueimp
smooth-streaming
f#-fake
audio-fingerprinting
blitz3d
alfred
symantec
qtruby
nimbus
audiorecord
jde
3d-rendering
treelist
web-optimization
dcast
cascading
android-facebook
mojolicious
serial-communication
redquerybuilder
biginsights
updating
android-togglebutton
page-refresh
copy-on-write
firebase-tools
chrome-mobile
static-files
fxmlloader
yosemite
cocos2d-x-2.x
pnunit
ccmenuitem
behance-api
azure-caching
fastcgi-mono-server
internet-radio
boofcv
nativequery
logo-lang
xcode6.1-gm-seed
8-puzzle
ie-developer-tools
octokit
cab
infomaker
listpicker
qgraphicsscene
mmo
webpage-screenshot
jquery-1.8
filedialog
github-archive
motorola-droid
maven-eclipse-plugin
copyfile
yii-cactiverecord
jqzoom
flexbuilder
openwrap
lightopenid
cinder
rollover
virtual-destructor
mediastreamsource
mysql-pconnect
helios
httpbrowsercapabilities

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile