Reactjs 使用酶测试时，材料UI的样式和道具不呈现+；开玩笑

我正在为一个组件编写一个测试，该组件使用Jest从MaterialUI包装在一个withStyles（）中。我搜索了很多例子，但没有找到答案

以下是我的文件：

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

我删除了

类。卡

并尝试了，然后我得到了以下错误：

登录›在不崩溃的情况下呈现

TypeError: Cannot read property 'card' of undefined

TypeError: Cannot read property 'resetErrorMessage' of undefined

---

我希望包装器组件的行为与没有withStyles（）组件的包装器相同。

看起来您在测试包装的组件时没有传递任何道具，而组件需要传递一些道具

我认为当你向它传递一些必要的道具时，它会起作用，如下所示：

• 导出

  Login.js中的
  Login
  类

导出类登录{
// ...
}

• 然后导入到测试：

//您应该导入'Login'类以单独测试
从“/Login”导入{Login}；
测试（'在不崩溃的情况下呈现'，（）=>{
常量道具={
课程：{
卡片：“yourCardClass”，
},
resetErrorMessage:jest.fn（），
submitMerritosLogin:jest.fn（），
};
常量包装器=浅（）；
//应该在组件挂载时调用
expect（props.resetErrorMessage）.toHaveBeenCalled（）；
expect（wrapper.find（'Button'）.text（））.toEqual（'Sign-in'）；
});

感谢您的回复，我如您所说尝试了，但出现了类似登录的错误›遇到了一个声明异常expect（jest.fn（））。TohaveBeenCall（）希望调用了模拟函数，但没有调用。它应该可以工作。无论如何，请尝试删除该断言，然后检查您的上述异常是否消失？还有一件事，您还应该

导出类登录

，以便于测试您的组件，而不是通过HOC组件从中检索。我不知道如何导出以进行测试。我的项目中的所有组件都是临时的。我可以单独导出以进行测试吗。请给我举个例子，因为我刚刚开始更新答案，以反映我提到的内容

TypeError: Cannot read property 'resetErrorMessage' of undefined