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

loop data from state with react.js
Prompt is made when navigating within same route
React Redux fire action during routing change
How to mange memory used by A-Frame?
The development server returned response error code :504
Stateless component to toggle boolean
Basic react component not rendering
Can we share code between react webapp and react native app and is react-native production ready
Webpack - Build css not applied
How to prevent User from creating duplicate values using React-Select Creatable?
react-scripts start throws an error when webpack is installed to an existing react project
How to use Flow to enforce missing prop types
How to update a stream of React components?
Why save hash history when navigating across different sections on a single page app?
react-select AsyncCreatable isOptionUnique
[Flow]Share type definitions among libs

Categories

HOME
youtube-api
azure-active-directory
primefaces
snappy
bigtable
latex
readdir
azure-database-mysql
cryengine
x509certificate
okhttp3
crash
artifactory
browserstack
virtualhost
yacc
adroitlogic
comma
box2d
taxonomy
reportlab
printf
polybase
waterfall
restangular
kundera
ipython-parallel
directions
contextmenustrip
flickr
webmock
wunderground
geocomplete
azure-storage-files
jslider
aspose.pdf
icu
aura-framework
contenteditable
vpython
qtwebkit
selection-sort
huawei
sharing
portaudio
glade
easy68k
hdr
cherry-pick
vitamio
boost-propertytree
archiva
pebble-js
apache2-module
tess4j
pagecontrol
xml-simple
wingdb
cl.exe
indices
optimistic-locking
pysvn
carrier
misfire-instruction
nsnumber
android-library
wordbreaker
bindinglist
scsf
copyfile
isgl3d
session-hijacking
mismatch
sipdroid
service-layer
object-tag
conditional-operator
nyromodal
dongle
retrospectiva
jgrowl
managed-code
httpbrowsercapabilities
office-2003

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile