如何解决使用 Enzyme + Jest 进行测试时,Material-UI withStyles 和 props 未呈现
我正在使用 Jest 为 Material UI 中包装在 withStyles() 中的组件编写测试。我搜索了很多例子,但没有得到解决方案。
以下是我的文件:
登录.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),));
登录.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');
});
});
运行测试时出现如下错误:
登录 › 渲染而不会崩溃
TypeError: Cannot read property 'card' of undefined
我删除了 classes.card
并尝试然后我也收到以下错误:
登录 › 渲染而不会崩溃
TypeError: Cannot read property 'resetErrorMessage' of undefined
我希望包装器组件的行为方式与没有 withStyles() 组件的包装器相同。
解决方法
看起来您正在测试包装的组件而没有传递任何道具,而该组件需要必须传递一些道具。
我认为当你向它传递一些需要的道具时它会起作用,它会如下工作:
- 导出
Login
中的Login.js
类
export class Login {
// ...
}
- 然后导入到测试中:
// 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');
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。