Блог

Я использую CSS-модули в приложении CRA. Мой компонент выглядит так:

 import HeaderStyles from './Header.module.scss';

const Header: FunctionComponent<HeaderProps> = ({
// Props
}) => (
  <div className={HeaderStyles['header-container']}>
  // Some other stuff
)
  

Мой тест выглядит так:

     const component = shallow(
      <Header />
    );

    expect(component.find('.header-container')).toBeTruthy();
  

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

Я исследовал и обнаружил, что либо jest, либо react-scripts загружают просто пустой объект вместо этого модуля стиля. Я предполагаю, что они используют другой загрузчик или что-то в этом роде, но это круто, так как в модульном тестировании вам нужно протестировать только свою часть пакетов или загрузчиков, а не то, как работают другие пакеты, так что все в порядке.

Странно то, что любой стажер начнет с запроса HeaderStyles['header-container'] , что приведет к недопустимому тестированию и займет гораздо больше времени.

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

 <PatchStyles classNames={HeaderStyles}>
  <div className="header-container">...</div>
</PatchStyles>
  

и он автоматически применит стили заголовков вместо вас. Для получения дополнительной информации взгляните на пример StackBlitz .