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

creating elements through loop inside render function in react
Cannot find module '../request' error using mock in Jest
add tooltip for material-ui slider
React rails component render error
Reagent :component-did-mount hook not called with meta-annotated component function
Doc generator for typescript and React
Redux-form v6 isDirty (and isPristine) selector not triggering re-render on state change
error 'cannot find module' on 'main.scss' with Webpack, SASS, and React
Gulp with webpack-dev-server
How to use date picker in redux form
immutable js in react redux application
React - how to wait and fade out?
React Router, access history object from child components
styled-components: worried about FOUC
How do I integrate paytm gateway in reactJS
How can I declare a two dimensional array in React?

Categories

HOME
youtube-api
msbuild
grpc
hiveql
mediarecorder
richtextbox
urllib2
point-of-sale
decoding
http-status-codes
virtualenv
captcha
camunda
popup
ejb-3.1
connectiq
opengraph
fastboot
handle
scrapy-spider
priority-queue
grunt-contrib-uglify
large-files
typeorm
cqlsh
2checkout
xlib
jboss-arquillian
exacttarget
storefront
n1ql
mootools
minitest
cache-control
ponylang
lighting
outlook-2010
realloc
motion
jvisualvm
binary-decision-diagram
head
easyquery
import.io
denodo
px4
pyautogui
qt3d
distcc
universe
visual-web-developer
deck.js
cosign-api
android-xmlpullparser
supervised-learning
aws-kms
innertext
bbedit
stdlist
salesforce-service-cloud
factorization
yfiles
overlapping
newlib
ios8-share-extension
exchange-server-2007
dcg
genero
cordova-3
aiff
kss
grunt-contrib-connect
agent-based-modeling
yandex-api
nodeunit
cvi
git-subtree
.net-reflector
mysql-error-1146
google-voice
kendo-window
infomaker
extensibility
usersettings
panelgrid
removeall
vline
dnsbl
php-gettext
android-memory
systrace
copyfile
capitalization
umfpack
file-processing
nyromodal
pitch-shifting
calendarextender
file-storage
data-formats
manuals
script-tag
disk-based
asp.net-1.1

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