Как протестировать компонент, который не экспортируется в React - PullRequest
Новая
       31

Как протестировать компонент, который не экспортируется в React

0 голосов
/ 01 февраля 2019

Я недавно присоединился к пользовательской базе реагирования и использую jest / энзим для тестирования.

У меня есть класс, метод рендеринга которого выглядит примерно так: 

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

Стамбул говорит, чтолиния, где определен Orange, не обнаруженаМне трудно понять, как его покрыть, и если мой дизайн должен быть другим.

Я тестирую класс с чем-то вроде wrapper.shallow(<MyClass/>) Спасибо за любой вклад.

Стамбульский отчет: istanbul report

1 Ответ

0 голосов
/ 01 февраля 2019

Для меня было бы более разумно определить компонент вне функции рендеринга, а не переопределять его заново при каждом изменении рендера / состояния: 

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