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

Geo complete for ReactJS
How to create Typescript Definition for React Native Nested Components
React.js Flux add, make Client's Browser automatic update to latest code
How to call an event on tabs changed in react-bootstrap
React Native this2.state error
ReactJS wrapping child component in div breaks table
React do I have to rerender parent in order to rerender children?
How to expose a 'generic' event from a custom React component in TypeScript v2.x
Does anyone have a solution to dynamic breadcrumbs and react-router 4?
Connected component not getting props on initial render. mapStateToProps not being called?
Redux + Persist + AsyncStorage return promise from dispatch
Dynamically imported module in react won't react to Mobx observable
How to do React server rendering if the page is different depending on whether the user is logged in?
Using Apollo's MockedProvider why don't the component's props get populated with result?
onUpdate property or event
Setup for browser.js current its on watch all the time after call npm run test

Categories

HOME
logging
twitter-bootstrap
azure-documentdb
openacc
wifi
cryengine
ms-access-2010
powerquery
procmon
pdf-generation
cdn
qt4
rethinkdb
vsixmanifest
theory
chef-recipe
expo
cakephp-2.0
comma
fastreport
jinja2
owncloud
legend-properties
aws-devicefarm
conditional-formatting
scotty
ajaxcontroltoolkit
polybase
serenity-js
gnu-screen
screen-scraping
concatenation
quality-center
struts
gsuite
sasl
smart-device
cloudformation
pushpad
edsdk
textview
spring-oauth2
snapkit
geocomplete
perf
console.readline
instances
scalamock
observer-pattern
mixed-models
rbac
result
amazon-fire-tv
text-formatting
remap
lucee
runtime-permissions
hellosign
dmalloc
reloaddata
overhead
disassembly
cardview
lightspeed
qt3d
vertex-shader
sprockets
hfp
audiorecord
hana-sql-script
self-join
pushwoosh
azure-mobile-app
qxorm
aiff
novell
famous-engine
powershell-v1.0
oxygenxml
rda
hotlinking
class-library
mixradio
flask-mongoengine
logo-lang
infomaker
nokogiri
pyxplot
stringstream
uikit-dynamics
outlook-object-model
simplemembership
biztalk-deployment
algol
metapost
yii-components
teamsystem
joomla1.7
cgaffinetransform
soapexception
cpack
html5-animation
activescaffold
google-local-search
carbon-emacs
dynamic-scope
atmega16

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