lundi 15 mai 2017

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);
    });
});

Aucun commentaire:

Enregistrer un commentaire