Question

我有一个由switchMap((params: ParamMap) => this.autopostService.getcarDetail(params.get('id')))和withStyles HOC包裹的组件，现在我想进行withTranslation测试该组件，但是我不知道如何获取包裹的组件。只是一个简单的测试：应该渲染所有字段，所以我不想使用shallow，并且我不能将 export default 设为默认值，因为它具有默认值。这是我的代码：

mount

这是我的测试：

import React, { Component } from 'react';
import { withStyles, Grid, TextField, Button } from '@material-ui/core';
import { createShallow } from '@material-ui/core/test-utils';
import { withTranslation } from 'react-i18next';
import { styles } from '.MyStyles';

export const MyComponent = withTranslation(withStyles(styles)(class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isWrong: false,
      isEmpty: false,
      value: '',
    }
    onChange = (e) => {
      const { value } = this.state;
      e.preventDefault();
      this.setState({value: e.targer.value});
      value==''?this.setState({isEmpty: true}):this.setState({isEmpty: false});
    }
    onClick = () => {
      const { isEmpty } = this.state;
      isEmpty?this.setState({isWrong: true}):this.setState({isWrong: false});
    }
  }
  render() {
    const { classes, t } = this.props;
    const { isWrong, value } = this.state;
    return (
      <div>
        <Grid container className={classes.content1}>
          <Grid item>{t('Task 1')}</Grid>
          <Grid item>{t('Task 2')}</Grid>
        </Grid>
        <Grid container className={classes.content2}>
          <div>{t('Task 3')}</div>
          <TextField label={t('Info')} value={value} error={isWrong} onChange={this.onChange}></TextField>
          <Button variant="contained" onClick={this.onClick}>{t('Change')}</Button>
        </Grid>
      </div>
    );
  }
}));

{...}

关于测试HOC组件

0 个答案: