WithStyles пользовательского интерфейса материалов вызывают проблемы при тестировании компонента класса с сохранением состояния с помощью Jest + Enzyme - PullRequest
Новая
       14

WithStyles пользовательского интерфейса материалов вызывают проблемы при тестировании компонента класса с сохранением состояния с помощью Jest + Enzyme

1 голос
/ 02 июня 2019

У меня есть приложение React + TypeScript, которое является SSR. Я использую Material-UI с инструкциями по SSR, как описано здесь:

https://material -ui.com / направляющие / сервера визуализации /

Многие мои компоненты находятся в состоянии и я тестирую их с помощью 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 проходят.

1 Ответ

0 голосов
/ 03 июня 2019

РЕДАКТИРОВАТЬ: я думаю, что вам нужно использовать 

wrapper.dive().setState(state)

потому что оболочка withStyles HOC и wrapper.dive () - ваш компонент

...