如何测试未在出口做出反应的成分

Question

我最近加入反应用户群和使用笑话/酶进行测试。

我有一个类，它的渲染方法看起来是这样的：

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>)
    }
}