Javascript 如何验证玩笑中的反应道具和酶？

所以我试图学习React中的测试，我有：

Button.js

和

Button.test.js

该问题与下面的代码一起注释：

//Button.js
从“React”导入React；
从“属性类型”导入{string，bool，func}；
从“./styled”导入{StyledButton}
常量按钮=({
大小，
文本，
}) => (
{text}//但是文本道具在这里。这是我目前将道具传递给孩子们的做法，我遗漏了什么吗？
);
Button.propTypes={
大小：字符串，
文本：字符串，
};
Button.defaultProps={
大小：“”，
文本：“”，
};
导出默认按钮；
//Button.test.js
从“React”导入React；
从“酶”导入{shall}；
从“../../components/Button/Button”导入按钮；
描述（'组件：按钮'，（）=>{
常量minProps={
文本：“”，
大小：“”，
};  
它（'呈现一个大小为“小”且包含文本的按钮'，（）=>{
常数包装=浅(
);
expect（wrapper.prop（'size'））.toBe（'small'）；
expect（wrapper.prop（'text'））.toBe（'Join-us'）；
});
});
//样式按钮
从“antd/lib/Button”导入按钮；
const StyledButton=styled（按钮）`
&.ant btn{
填充：0 24px；
${（{size}）=>{
如果（大小=='small'）{
返回css`
字体大小：14px；
线高：32px；
`;
}
返回null；
}};
`;
导出{StyledButton}；

---

有人知道为什么除非我将道具传递给

样式按钮

，否则测试不会通过吗？

在断言道具之前，您需要在

按钮

组件中找到

样式按钮

// Button.test.js
import React from 'react';
import { shallow } from 'enzyme';

import Button from '../../components/Button/Button';
import { StyledButton } from './styled'

describe('Component: Button', () => {
  const minProps = {
    text: '',
    size: '',
  };  

  it('renders a button in size of "small" with text in it', () => {
    const wrapper = shallow(
      <Button {...minProps} size="small" text="Join us" />
    );

    expect(wrapper.find(StyledButton).prop('size')).toBe('small');
    expect(wrapper.find(StyledButton).prop('text')).toBe('Join us');
  });
});

//Button.test.js
从“React”导入React；
从“酶”导入{shall}；
从“../../components/Button/Button”导入按钮；
从“./styled”导入{StyledButton}
描述（'组件：按钮'，（）=>{
常量minProps={
文本：“”，
大小：“”，
};  
它（'呈现一个大小为“小”且包含文本的按钮'，（）=>{
常数包装=浅(
);
expect（wrapper.find（StyledButton.prop（'size'））.toBe（'small'）；
expect（wrapper.find（StyledButton.prop（'text'））.toBe（'Join-us'）；
});
});

我意识到这篇文章有点过时，但有一种更好的方法来测试预期的道具类型及其值

这是我所拥有的，而且效果很好：

手风琴

import React from "react";
import PropTypes from "prop-types";
import { Icon } from "../Icon";
import styled from "styled-components";

const AccordionContainer = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: ${props => props.justifyContent};
  background-color: ${props => props.theme.color[props.color]};
  ${props => props.theme.fontSize(14)};
`;

const ChildrenContainer = styled.div`
  display: flex;
  flex-direction: column;
`;

const LabelWrapper = styled.div`
  padding: 10px;
`;

/**
 * Accordion is nearly a Higher Order Component (HOC) in the fact that it encapsulates an Icon and when that
 * Icon is clicked an onClick callback provided should toggle the closed state.
 */
export class Accordion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      closed: props.closed
    };
  }

  render() {
    let {
      props: {
        children,
        hasIcon,
        iconColor,
        iconFlexDirection,
        iconExpand,
        iconName,
        iconSize,
        label,
        color,
        justifyContent
      },
      state: { closed }
    } = this;

    return (
      <AccordionContainer color={color} justifyContent={justifyContent}>
        <div onClick={() => this.setState({ closed: !closed })}>
          {hasIcon ? (
            <>
              <LabelWrapper>
                <Icon
                  fontSize={iconSize}
                  name={iconName}
                  color={iconColor}
                  flexDirection={iconFlexDirection}
                  expand={iconExpand}
                />
              </LabelWrapper>
              {!closed && <ChildrenContainer>{children}</ChildrenContainer>}
            </>
          ) : (
            <>
              <LabelWrapper>
                <div>{label}</div>
              </LabelWrapper>
              {!closed && <ChildrenContainer>{children}</ChildrenContainer>}
            </>
          )}
        </div>
      </AccordionContainer>
    );
  }
}

Accordion.propTypes = {
  color: PropTypes.string,
  closed: PropTypes.bool,
  justifyContent: PropTypes.string,
  hasIcon: PropTypes.bool,
  iconName: PropTypes.string,
  iconColor: PropTypes.string,
  iconExpand: PropTypes.bool,
  iconSize: PropTypes.number,
  label: PropTypes.string
};

Accordion.defaultProps = {
  closed: true,
  hasIcon: false,
  iconExpand: false,
  justifyContent: "flex-start"
};

从“React”导入React；
从“道具类型”导入道具类型；
从“./Icon”导入{Icon}；
从“样式化组件”导入样式化；
const AccordionContainer=styled.div`
显示器：flex；
弯曲方向：立柱；
弹性：1；
justify content:${props=>props.justify content}；
背景色：${props=>props.theme.color[props.color]}；
${props=>props.theme.fontSize（14）}；
`;
const ChildrenContainer=styled.div`
显示器：flex；
弯曲方向：立柱；
`;
const LabelWrapper=styled.div`
填充：10px；
`;
/**
*手风琴几乎是一个高阶组件（HOC），因为它封装了一个图标
*单击图标时，提供的onClick回调应切换为关闭状态。
*/
导出类Accordion扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
关闭：道具，关闭
};
}
render（）{
让{
道具：{
儿童
哈西肯，
iconColor，
iconFlexDirection，
iconExpand，
我的名字，
我意识到，
标签，
颜色
证明内容正当
},
状态：{已关闭}
}=这个；
返回(
this.setState（{closed:！closed}）}>
{哈西肯(
{！已关闭&&{children}
) : (
{label}
{！已关闭&&{children}
)}
);
}
}
手风琴.propTypes={
颜色：PropTypes.string，
关闭：PropTypes.bool，
justifyContent:PropTypes.string，
hasIcon:PropTypes.bool，
iconName:PropTypes.string，
iconColor:PropTypes.string，
iconExpand:PropTypes.bool，
iconSize:PropTypes.number，
标签：PropTypes.string
};
Accordion.defaultProps={
关闭：是的，
哈西肯：错，
iconExpand:false，
辩护内容：“灵活启动”
};

Accordion.spec.js

import React from "react";
import { shallow, mount, render } from "enzyme";
import styled, { ThemeProvider } from "styled-components";
import theme from "../../styles/theme";
import { Accordion } from "./Accordion";
import sinon from "sinon";

describe("Accordion", () => {

  const AccordionJSX = (
    <ThemeProvider theme={theme}>
      <Accordion
        iconName="home"
        iconColor="#777"
        iconSize={14}
        hasIcon={true}
      >
        HELLO ACCORDION
      </Accordion>
    </ThemeProvider>
  );

  it("Should render without throwing an error", () => {
    expect(shallow(
      AccordionJSX
    )).not.toBeNull();
  });

  const AccordionComponent = mount(AccordionJSX);

  it("Should have a styled-components theme", () => {
    expect(AccordionComponent.props().theme).not.toBeNull();
  });

  it('check props passed in', () => {
    console.log(AccordionComponent.props().children);
    expect(AccordionComponent.props().children.props).toEqual({
      iconName: 'home',
      iconColor: '#777',
      iconSize: 14,
      hasIcon: true,
      children: 'HELLO ACCORDION',
      closed: true,
      iconExpand: false,
      justifyContent: 'flex-start'
    });
  });

  it('check state after opened', () => {
    expect(AccordionComponent.props().theme).not.toBeNull();
  })


});

从“React”导入React；
从“酶”导入{shall，mount，render}；
从“样式化组件”导入样式化的{ThemeProvider}；
从“../../styles/theme”导入主题；
从“/Accordion”导入{Accordion}”；
从“sinon”进口sinon；
描述（“手风琴”，（）=>{
const AccordionJSX=(
你好，手风琴
);
它（“应该在不引发错误的情况下进行渲染”，（）=>{
期望（浅）(
手风琴JSX
)).not.toBeNull（）；
});
const AccordionComponent=安装（AccordionJSX）；
它（“应该有一个样式化的组件主题”，（）=>{
expect（accordiocomponent.props（）.theme）.not.toBeNull（）；
});
它（'检查传入的道具'，（）=>{
log（accordiocomponent.props（）.children）；
expect（accordiocomponent.props（）.children.props）.toEqual({
我的名字是：“家”，
iconColor:“#777”，
iconSize:14，
哈西肯：没错，
孩子们：“你好，手风琴”，
关闭：是的，
iconExpand:false，
justifyContent:“灵活启动”
});
});
它（'打开后检查状态'，（）=>{
expect（accordiocomponent.props（）.theme）.not.toBeNull（）；
})
});