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

Question

我最近加入了 React 用户群并使用 jest/enzyme 进行测试。

我有一个 class，它的渲染方法类似于：

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

Istanbul 说定义 Orange 的那一行没有被覆盖。我很难弄清楚如何覆盖它，以及我的设计是否应该有所不同。

我正在用 wrapper.shallow(<MyClass/>) 之类的东西测试 class 感谢您的任何输入。

伊斯坦布尔报道：

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

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

How to test a component that isn't exported in React

unit-testing

istanbul

reactjs

jestjs

enzyme