Тест моментального снимка Jest добавляет слово «_class» в React HOC в моментальном снимке на CI, но не на моей машине

Question

У меня есть компонент React, импортирующий другой React HOC.

Мой React HOC:

      import { withRouter } from "react-router";
...
const InnerComponent: FC<any> = (props): ReactElement => {
...
}

const withData = compose(
  graphql(SOME_QUERY, {
    props: mapProps,
    options,
  }),
  injectIntl
);

export default withRouter(withX(withData(InnerComponent)));

Мой компонент React:

      export const OuterComponent: FC<any> = (props): ReactElement => {
    ...
    return (
    ...
    <InnerComponent />
    ...
)}

Это отрывок из моего тестового файла спецификации (я использую фермент и шутку):

      const component = shallow(<OuterComponent {...props} />)
expect(component).toMatchSnapshot()

Локально все работает нормально. Часть, в которой должен отображаться мой InnerComponent, представлена ​​на снимке следующим образом:

      <withRouter() />

Когда я регистрирую свой код и позволяю ему работать на CI, тест снимка не проходит, потому что эта строка в снимке, который генерирует CI, выглядит следующим образом:

      <withRouter(_class) />

Я уверен, что версии энзима и шутки одинаковы на CI и на моей машине. Я даже пытался обновить шутку и энзим на своей машине, но так и не получил снимок с этим странным словом.

Где это _class откуда и как я могу этого избежать, или как убедиться, что моя локальная установка также генерирует его во время создания моментального снимка?

Answer 1

Этой проблемы можно избежать, правильно настроив наши пользовательские HOC. В этом случае withX HOC не было displayName. Я изменил его так, чтобы он выглядел так, как показано ниже, так что HOC в моментальном снимке создается с тем же именем как на локальном компьютере, так и на сервере сборки.

      export function withX(WrappedComponent) {  
  class WithX extends React.Component {
    render() {
      ...     
      return <WrappedComponent {...this.props} />
    }
  }
  WithX.displayName = `WithX(${getDisplayName(WrappedComponent)})`
  return WithX
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

Это все еще не объясняет, почему у HOC не было имени на локальном компьютере, но было имя _class на сервере сборки.