Как я могу проверить стили из реквизита в стилизованном компоненте?

Question

Добрый день, я новичок в юнит-тестировании. Я создал компонент <CustomLink />, в нем я использую styled-component Link. Мне нужно написать модульный тест, используя любой из инструментов (Mocha, Enzime и др. c.), Кроме Jest, который проверил бы, что шрифт в моем стилевом компоненте - 18px.

export const CustomLink = props => {
    return(
        <WrapperLink>
            <Link fontSize="18px">{props.text}</Link>
        </WrapperLink>
    )
};

Styled -компонент:

import styled from 'styled-components';

    export const Link = styled.a`
        font-size: ${props => props.fontSize};
        cursor: pointer;
    `;

Answer 1

вы можете написать модульные тесты для ваших стилевых компонентов с библиотекой jest-styled-components очень просто.
вот так:

import React from "react";
import styled from "styled-components";
import renderer from "react-test-renderer";
import "jest-styled-components";

export const Link = styled.a`
  font-size: ${props => props.fontSize};
  cursor: pointer;
`;

test("it tests props", () => {
  const tree = renderer.create(<Link fontSize={18} />).toJSON();
  expect(tree).toHaveStyleRule("font-size", "18");
});

вы можете прочитать больше:
https://www.npmjs.com/package/jest-styled-components