Как тестировать компоненты, обернутые withStyles material-ui?

Question

[Павел Диденко]

Разрабатываю приложение с фреймворком material-ui. Начал писать тесты и столкнулся с проблемой при написании тестов для компонента, обернутого в HOC withStyles.
Вылезает вот такая ошибка:

TypeError: Cannot read property 'main' of undefined

И вот место этой ошибки:

label: {
  fontSize: 12, 
  color: palette.gray.main
}

В функцию, которая возвращает объект стилей передается параметром тема приложения из которой достается palette, которую туда пробрасывает HOC указанный в описании выше, но при тестировании он видимо не может достучаться до темы и получает undefined. Либо сначала считывается импорт функции стилей не дойдя до HOC, и в нем, логично будет undefined.

Кто сталкивался с такой штукой, как решали проблему?

P.S. деструктурировать до каждого объекта, чтобы получить хотябы undefined в виде значения - костыль, который очень не хочется делать. Плюс вложенные компоненты тоже могут быть обернуты

Answer 1

[Павел Диденко]

Нашел такое решение, кто из знатоков, поправьте если что не так и как тогда сделать правильнее:

из пакета 'react-test-renderer' импортирую:

import ShallowRenderer from 'react-test-renderer/shallow'

Из компонента импортирую обычным экспортом не обернутый в HOC компонент
import { Profile } from '../Profile';

И теперь для снепшота не происходит глубокого рендера:

it('Profile renders snapshot', () => {
        const renderer = new ShallowRenderer();
        const result = renderer.render(<Profile />);
        expect(result).toMatchSnapshot();
    });

Еще один вариант для работы с MobX и декораторами:
Если компонент обернут в inject, то способ выше сделает бесполезный снимок. Чтобы сделать сделать нормальный снимок компонента, делаем так:

it('ProfileMainInfo renders snapshot', () => {
        const renderer = new ShallowRenderer();
        const result = renderer.render(<ProfileMainInfo.wrappedComponent {...props} />);
        expect(result).toMatchSnapshot();
    });

То есть - обращаемся к свойству wrappedComponent в нем лежит оборачиваемый компонент