Question

我正在使用 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() 组件的包装器相同。

Answer 1

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

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

导出 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');
});

使用 Enzyme + Jest 进行测试时，Material-UI withStyles 和 props 未呈现

1 个答案: