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

React rebuild tree with HOC components (causing input field focus loss)
using css-module with react?
Setting state when react router renders a new component
Import npm modules in client side React components
Argument of type 'typeof -' is not assignable to parameter of type ComponentClass error
React components make inheritance through Compositon
Render React Component from Backbone
add comment jsx logic
React function passed to child through props is undefined
render multiple components with enzyme shallow
React app doesn't serve image assets on production
Who is supposed to pass 'handleSubmit'
React - Display loading screen while DOM is rendering?
React Synthetic Events Bubble Capture with Components
rollup js configuration - globals?
How do I achieve the component scoped styling of Angular 2 in React?

Categories

HOME
kendo-ui
ftp
cors
python-requests
phantomjs
livecharts
x509certificate
itext7
hiveql
uml-designer
foreach
procmon
scapy
ephesoft
gcloud
digital
urllib2
decoding
osrm
virtualenv
derby
jinja2
opendaylight
console-application
include-path
v4l2
ithit-webdav-server
sha
mongoose-im
android-6.0-marshmallow
cloudformation
sqldependency
units-of-measurement
openvms
odp.net
dom4j
respect-validation
oracle-bpm-suite
file-conversion
icu
susy
amazon-rds-aurora
risc
encoder
monaca
jcifs
intermediate-language
typewriter
reloaddata
spring-cloud-aws
iban
recursive-query
qt3d
spring-social-twitter
dbi
git-push
access-violation
settext
netlink
usps
archiva
web-optimization
periodic-processing
custom-build-step
code-translation
instabug
videoview
cascading
nonblocking
windows-kernel
database-project
polarion
photogrammetry
vectordrawable
maven-archetype
quickfixn
yosemite
parsefloat
fscanf
step
nspopupbutton
ant-contrib
data-layers
grunt-contrib-imagemin
kohana-orm
boost.build
netzke
hypertable
states
nserror
optimistic-concurrency
funambol
symfony-1.2
jqtransform
cpack
arraycollection
dongle
qprocess
dynamic-scope
pixel-bender
zend-acl
tracd

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