Question

我有一个React + TypeScript应用程序，它是SSR。我将Material-UI与SSR指令一起使用，如下所述：

https://material-ui.com/guides/server-rendering/

我的许多组件都是有状态的，我用Jest + Enzyme对其进行了测试。这是一个这样的组件：

export interface CounterProps {
  propExample: string;
  classes: any;
}

export interface CounterState {
  counter: number;
  error: boolean;
}

class Counter extends Component<CounterProps, CounterState> {
  constructor(props: CounterProps) {
    super(props);

    this.state = {
      counter: 0,
      error: false
    };
    ...
  }
  ...
}

这样装饰我的组件时会发生问题：

export default withStyles(styles)(Counter);

然后用酶包裹它：

const counterProps: CounterProps = {
  propExample: "blue",
  classes: {}
};

const counterState: CounterState = {
  counter: 0,
  error: false
};

/**
 * Factory function to create a ShallowWrapper for the Counter component.
 * @function setup
 * @param {object} props - Component props specific to this setup.
 * @param {object} state - Initial state for setup.
 * @returns {ShallowWrapper}
 */
const setup = (
  props: CounterProps = counterProps,
  state: CounterState = counterState
): ShallowWrapper => {
  const wrapper = shallow(<Counter {...props} />);
  wrapper.setState(state);
  return wrapper;
};

Jest在测试ShallowWrapper::setState() can only be called on class components时抛出此错误。我想知道如何解决这个问题。对于无状态类组件，仅对于有状态类组件，不会发生此问题。

此外，该应用程序可以完美运行。只是在用Jest + Enzyme测试时，我才收到此错误。如果我删除withStyles装饰器并仅正常导出组件，则Jest + Enzyme测试通过。

Answer 1

编辑：我认为您需要使用

wrapper.dive().setState(state)

因为wrapper是withStyles HOC，而wrapper.dive（）是您的组件

当使用Jest + Enzyme测试有状态的类组件时，Material-UI的withStyles会导致问题

1 个答案: