如何测试React中未导出的组件

Question

我最近加入了react用户群，并使用玩笑/酶进行测试。

我有一个类，其渲染方法类似于：

render() {
  const Orange = ({ text }) => (<span className="orangeText" > {text}</span>);
  const headerText = flag ? (<Orange text="a"/>) : (<Orange text="b"/>)
  return (<div>{headerText}</div>)
}

伊斯坦布尔说，未定义橙色的行。我很难弄清楚如何覆盖它，以及我的设计是否应该与众不同。

我正在使用类似wrapper.shallow(<MyClass/>)的类来测试课程 感谢您的输入。

伊斯坦布尔的报告：

Answer 1

这将更有意义我定义组件外部的渲染功能，而不是在每个渲染/状态变化再次重新定义：

const Orange = ({ text }) => (<span className="orangeText">{text}</span>)

export default class Whatever extends React.Component {
    …

    render() {
      return (<div><Orange text={flag ? "a" : "b"} /></div>)
    }
}

顺便说一句。像styled-components这样的东西可能值得尝试：

import { styled } from "styled-components"

const Orange = styled.span`
    color: orange;
    font-size: 1.1em;
`

export default class Whatever extends React.Component {
    …

    render() {
      return (<div><Orange>{flag ? "a" : "b"}</Orange></div>)
    }
}