Могу ли я использовать функцию .hasClass от Enzyme с компонентами реагирования, импортирующими файлы css?

Question

Я в настоящее время настраиваю тестовую среду и сталкиваюсь с проблемой, что все мои вызовы .hasClass возвращают false.

Текущая настройка: Мои реагирующие компоненты импортируют файлы css с оператором импорта. Например: import styles from "./text.scss";

Чтобы протестировать компоненты, мне нужно было определить moduleNameMapper в файле jest.config. js примерно так:

moduleNameMapper: { "\\.(scss|less)$": "<rootDir>/__mocks__/styleMock.js" },

Я думаю, что moduleNameMapper отчасти ответственен за проблемы, так как он заменяет по умолчанию все определения s css на пустой модуль. (styleMock. js content - это просто module.exports = {};) Но мне нужно, чтобы он протестировал мои компоненты, иначе это приведет к ошибке, когда jest попытается загрузить s css import.

Когда я Теперь попробуйте это:

 it("is Title", () => {
    const wrapper = shallow(<Text textType={TextType.Title} />);
    expect(wrapper.find("div").hasClass("Title")).toEqual(true);
  });

Всегда возвращает false.

Есть ли решение о том, как проверить классы s css (с .hasClass из фермента?), когда у вас есть s css импортировать операторы в ваш компонент?

Answer 1

Наконец-то найдено решение, которое работает!

Для меня мне пришлось установить identity-obj-proxy через npm install --save-dev identity-obj-proxy, а затем добавить его в конфигурационный файл jest:

moduleNameMapper: {
    "^.+\\.(css|less|scss)$": "identity-obj-proxy"
  }

После этого мои имена классов теперь правильно отображаются в снимках и больше не имеют неопределенных имен классов! В дополнение к этому теперь я могу наконец использовать функцию .hasClass для фермента и проверить, был ли добавлен новый класс css в div и так далее. (Наконец-то я могу go проверить эти части условного рендеринга!)