Когда я тестирую компонент, который использует тематические реквизиты в своих стилях, реквизиты темы отображаются в тесте правильно, но тесты не пройдены.
Использование этого теста:
import theme from './theme.js';
it('should display on mobile ', () => {
wrapper = renderer.create(<HamburgerIcon theme={theme} />).toJSON();
expect(wrapper).toHaveStyleRule('display', 'flex', { media: `(max-width:${theme.mobile})` });
});
Iполучить эту ошибку:
На переданном компоненте не найдены правила стиля с использованием параметров: {"media": "(max-width: 500px)"}
Итак, похоже, что он преобразует (max-width:${theme.mobile}) в правильное значение px, но не соответствует ни одному стилю с этим значением.
Если я изменю медиазапрос в стилевом компоненте на @media (max-width: 500px)и затем я проверяю это следующим образом:
it('should display on mobile ', () => {
wrapper = renderer.create(<HamburgerIcon theme={theme} />).toJSON();
expect(wrapper).toHaveStyleRule('display', 'flex', { media: '(max-width: 500px)' });
});
, затем тест проходит.
Учитывая, что я использую тематические реквизиты для ряда различных атрибутов стиля, я хочууметь использовать реквизит темы в тестировании.Есть ли способ заставить это работать?Спасибо.