Material-UI withStyles and props not rendering when testing with Enzyme + Jest - reactjs

Question

I am writing a test for a component that is wrapped in a withStyles() from Material UI using Jest. I have searched many examples but didn't get solution.
Below are the my files:
Login.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as Actions from 'auth/store/actions/index';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';
import { withStyles } from '#material-ui/core/styles/index';
import { TextFieldFormsy } from '#fuse';
import Formsy from 'formsy-react';
import {
Button, Card, CardContent, Typography,
} from '#material-ui/core';
const styles = () => ({
card: {
width: '100%',
maxWidth: 400,
},
});
class Login extends Component {
state = {
email: '',
password: '',
};
form = React.createRef();
componentDidMount() {
this.props.resetErrorMessage();
}
componentDidUpdate() {
}
onSubmit = (model) => {
this.props.submitMerritosLogin(model);
};
render() {
const { classes } = this.props;
const { email, password } = this.state;
return (
<Card className={`${classes.card} mx-auto md:m-0 merritos-login-card merritos-mobile-register
justify-center items-center flex flex-col`}>
<CardContent className="flex flex-col p-44">
<img className="w-256 mb-32 ml-6 merritos-desktop-display merritos-mobile-image merritos-mobile-images self-center" src="assets/images/logos/merritos-blue-small.png" alt="logo" />
<Typography className="mt-16 font-bold text-24 merritos-login-subtitile merritos-theme-colour">Sign in</Typography>
<Typography className="mb-56 text-grey-darker text-16 font-bold ">to your professional world</Typography>
<Formsy
onValidSubmit={this.onSubmit}
ref={form => this.form = form}
className="flex flex-col justify-center w-full merritos-form"
>
<TextFieldFormsy
className="mb-16 merritos-border-color merritos-accountinfo-textinput"
type="email"
name="email"
label="Email"
value={email}
required
/>
<TextFieldFormsy
className="mb-16 merritos-border-color merritos-accountinfo-textinput"
type="password"
name="password"
label="Password"
value={password}
required
/>
<Button
color="primary"
size="small"
type="submit"
className="text-16 normal-case merritos-login-btn accountinfo-margin"
aria-label="LOG IN"
>
Sign in
</Button>
</Formsy>
</CardContent>
</Card>
);
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
submitMerritosLogin: Actions.submitMerritosLogin,
resetErrorMessage: Actions.resetErrorMessage,
}, dispatch);
}
function mapStateToProps({ auth }) {
return {
user: auth.user,
};
}
export default withStyles(styles, { withTheme: true })(withRouter(
connect(mapStateToProps, mapDispatchToProps)(Login),
));
login.test.js
import React from 'react';
import {render, fireEvent, screen} from '#testing-library/react';
import { shallow } from 'enzyme';
import Login from './Login';
describe('login', () => {
test('renders without crashing', () => {
const wrapper = shallow(<Login.WrappedComponent />);
expect(wrapper.find('Button').text()).toEqual('Sign in');
});
});
While running test I am getting error like bellow:
login › renders without crashing
TypeError: Cannot read property 'card' of undefined
I removed the classes.card and tried then also I got error below:
login › renders without crashing
TypeError: Cannot read property 'resetErrorMessage' of undefined
I am wanting the wrapper component to behave the same way as a wrapper without the withStyles() component.

Answer 1

Looks like you are testing the wrapped component without passing any props while the component requires some props having to be passed.
I think it would work as you pass some needed props to it, it would work as following:
Export Login class in your Login.js
export class Login {
// ...
}
Then import to the test:
// you should import `Login` class to test separately
import { Login } from "./Login";
test('renders without crashing', () => {
const props = {
classes: {
card: 'yourCardClass',
},
resetErrorMessage: jest.fn(),
submitMerritosLogin: jest.fn(),
};
const wrapper = shallow(<Login {...props} />);
// should get called as component did mount
expect(props.resetErrorMessage).toHaveBeenCalled();
expect(wrapper.find('Button').text()).toEqual('Sign in');
});