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

TypeError: Cannot read property 'props' of null in react
Is there a way to use radium styles for semantic-ui components in reactjs?
Convert between ES6 Classes React
Webpack dev server + React + Typescript wont inject assets after sources change
React-bootstrap : popup modal open when we click on login menu
Remove html attribute in production build
Why am I getting Failed prop type using react router and nested components
State bug - row component getting bad values from props if wait
Multi-line select component for react?
Use child components as real components, not stateless child objects
React alternative coding style with a 'constructor'
Hot Module Reload and React Dom issue
Webpack error: “You may need an appropriate loader to handle this file type”
Menus not opening in TinyMCE in React
react routing not working as expected
How to know when children finished parent function call?

Categories

HOME
postgresql
swift3
system-calls
sip
ssh
opencv4android
spotfire
google-api-oauth
software-collections
segmentation-fault
ethereum
apache-httpclient-4.x
jcodemodel
core-data
kairosdb
velocity
repeater
jinja2
airbnb
novacode-docx
aiml
prepros
apdu
waterfall
android-xml
visual-studio-community
scripting-language
typeorm
jboss-arquillian
arp
overflow
gitosis
ragel
queryover
blueimp
collation
compiler-warnings
definition
f#-fake
cakephp-3.2
api-key
spring-ide
px4
jcifs
nservicebus6
business-catalyst
vertex-shader
optional-parameters
easy68k
ldd
access-violation
jmap
web-optimization
code-translation
google-finance-api
computability
producer-consumer
jain-sip
roslyn-code-analysis
nmock
data-representation
mri
static-files
fxmlloader
frisby.js
pytz
xts
angular-file-upload
hotlinking
sendy
satisfiability
azure-caching
slimscroll
object-oriented-database
facebook-java-api
google-mirror-api
leap-year
dd4t
nsautoreleasepool
urlfetch
configurationsection
mysql-connector
helicontech
fileoutputstream
digg
rollover
viewdata
mysql-pconnect
helios
focus-stealing
authkit
urlscan





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