如何在样式化组件中测试 props 的样式？

Question

下午好，我是单元测试的初学者。我在其中创建了一个组件 <CustomLink /> 我使用 styled-component 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

如何在样式化组件中测试 props 的样式？

How can I test styles from props in a styled component?

tdd

unit-testing

mocha.js

reactjs

enzyme