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 NPM module: Undefined error
Dispatching further actions when handling actions
Using inline style string with ClojureScript, Om, and React.js
in reflux, can't reuse Component throught global var
Unit conversions, permissions, and other transforms in Flux & React
Flux + Data Lifecycle
Flux/React Complex Reusable Component
Reagent :component-did-mount
React JSX and FirstSibling or FirstChild
Select option with React TestUtils Simulate
Multiple instances of same react component
How can I disable animation in a reactjs component first time
Flux: return values from AJAX to the component
Flux waitFor() and async operation, how to model.
flux multiple store instances
Login ajax request Flux React?

Categories

HOME
reactjs
postgresql
twitter-bootstrap
stanford-nlp
ssh
snappy
webvr
latex
django-middleware
mediarecorder
sequence
ionic-native
subprocess
oms
ndepend
dynamics-crm-2011
jetbrains
chef-recipe
greensock
multibinding
passbook
summernote
cloudformation
drawrect
multilanguage
exacttarget
directions
kepserverex
matrix-multiplication
yelp
nscollectionview
mediastream
lfe
android-graphview
superclass
angular-fullstack
riemann
px4
r-commander
webmatrix
fileopendialog
distcc
papyrus
mongodb-3.3
visual-web-developer
jspx
tinybox2
containstable
web-performance
vanilla-forums
hexagonal-tiles
veeam
asp.net-2.0
jsonschema2pojo
lwuit
windows-search
triplestore
nodeunit
infor-eam
android-jack-and-jill
vbaccelerator
php-amqplib
sygic
pechkin
nsnumber
exi
jquery-1.8
php-gettext
jmesa
advanceddatagrid
utm
virtual-printer
discussion-board
qvariant
response-time
subdirectories
mysql-logic
for-xml
pkcs#7
cstring
vista64
high-load
weak-typing

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App