Как проверить конкретное значение css-свойства React-элемента?
Я хочу проверить конкретное значение css-свойства с помощью фермента. Для стилизации компонентов использовался css helper эмоций.
Предположим следующий случай:
it('title has font-size 20px', () => {
const titleCss = css`
font-size: 20px;
`;
const mountedTitle = mountWithTheme(<h1 className = {titleCss}>Title</h1>);
expect(mountedTitle).toHaveStyleRule('font-size', '20px');
});
Здесь:
mountWithTheme - это просто оболочка над методом энзимного рендеринга, но позволяет передать тему;
toHaveStyleRule соответствует шутка-эмоция.
Это не работает, я получил
Property not found: font-size
Если вы посмотрите на jest-emotion пример, вы увидите, что там используется «стилизованная» обертка, поэтому компонент-оболочка создан, но это не относится к хелперу «css».
Я также думал об использовании помощника рендеринга ферментов для создания фактического html, но кажется, что оболочка cheerio также не имеет доступа к значениям css.
@Alex, нет, та же ошибка.
Ответы 1
Если вы используете фермент, используйте метод render.
import React from 'react';
import { render } from 'enzyme';
import Component from '.';
describe('test css', () => {
it('test font size', () => {
const wrapper = render(<Component />);
expect(wrapper.find('h1')).toHaveStyleRule('font-size', '20px');
});
});
не уверен, но возможно
fontSize?