我如何在样式化组件中从道具测试样式？

Question

[下午好，我是单元测试的入门者。我在其中使用样式化组件<CustomLink />创建了一个组件Link。我需要使用除Jest之外的任何工具（Mocha，Enzime等）编写单元测试，该工具会检查我的样式组件中的字体是否为18px。

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

样式元素：

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