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

API requests as a result of changes to domain objects
How to redirect using if else in ReactJS
Prism.js html examples in React
Why is materialize not working with reactjs
React.js How to Pass Event Up Through Multiple Child Components?
Accessing react-router from flummox action/store
Flux - How does store should notify error?
is “shouldComponentUpdate” run on the server?
Reactjs component interfering other component on same page
Why does React strangely render the <p> (paragraph) tag?
flow complains if when having react and react-native in node_modules
Changing state in 'uncle' component?
Automatic redirect after login with react-router
react-bootstrap collapsable table row
Minify .jsx files in React JS
Same data in props and state

Categories

HOME
asterisk
classification
azure-active-directory
ns2
azure-database-mysql
jquery-plugins
watson-iot
artifactory
sugarcrm
travis-ci-cli
rtc
olap
mongoimport
core-data
point-of-sale
derby
yui
github-flavored-markdown
virtuemart
conditional-formatting
polybase
chartist.js
typeorm
selenium3
opencsv
openvms
geocomplete
pyenv
abide
mongoid5
yelp
libconfig
jvisualvm
quartz
irr
qtwebkit
togglebutton
jks
jenkins-2
remap
google-cloud-shell
appcmd
vertex
playframework-2.3
nservicebus6
r-commander
xamarin-test-cloud
aot
turbolinks
ldd
x12
disconnect
boost-bind
transaction-isolation
bbedit
firefox-os
gtkwave
bioconductor
jts
random-sample
notice
openhab
pysvn
qf-test
go-gin
telerik-appbuilder
node-mongodb-native
data-layers
adabas
8-puzzle
forward-declaration
android-library
linqdatasource
linear-interpolation
orchestration
doxia
django-1.4
nserror
optimistic-concurrency
datasheet
helicontech
copyfile
virtual-printer
flexbuilder
jexcelapi
s60
conditional-operator
chars
coderush-xpress
ffdshow
jgrowl
stackless
memory-consumption

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App