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

how change state of several elements after click on button with React.js
React 0.13 this.getDOMNode() equivalent to React.findDOMNode()
Using Masonry with ReactJS in browser
Getting DOM node from React child element
Babelify omit file extension on import
ReactJS: Control a child state from the child and the parent
What are these grey lines in the Chrome sources panel?
How to position and resize React Bootstrap Tooltip before displaying it on the DOM?
ES6 features in React Native
Error: Invariant Violation: dangerouslyRenderMarkup(…): Cannot render markup in a worker thread
Component not being unmounted
ReactJS: “this.props” is not a function when child component calls parent
Cannot require a React.js component
React.js way to emulate handlebars condition statements
How to work with martyjs container?
Restore scroll position on back button

Categories

HOME
ckan
macros
primefaces
sip
conceptual
stdout
arguments
esxi
ms-application-insights
grid
browser-cache
symfony-3.2
qt4
rethinkdb
theory
core-data
adroitlogic
desktop-application
react-select
responsive
simd
samba
indri
accordion
glibc
spring-webflow
keystone
javaagents
ng-tags-input
concatenation
procedural-generation
rvm
chartist.js
sha
sasl
azure-table-storage
2checkout
multilanguage
log4net-configuration
javax
repeat
kepserverex
client-server
mapquest
ssdp
glide-image-library
php-mongodb
nshttpurlresponse
cakephp-3.2
amazon-fire-tv
reqif
mef
g77
extjs3
wink
node-java
chain
foreground
diameter-protocol
boost-bind
database-administration
jmh
skbio
wiql
eaaccessory
pymol
data-quality-services
static-files
quickfixn
zoneminder
powerpoint-2010
pnunit
disabled-control
cs193p
smartxls
webshim
azure-caching
kernel-density
php-amqplib
randomaccessfile
panelgrid
qmainwindow
brew
microsoft-speech-platform
idoc
nsscrollview
nude.js
automapper-2
httppostedfilebase
pex-and-moles
xpolog
moss2007-security
cpack
quazip
table-valued-parameters
focus-stealing
high-load

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