Допустим, у меня есть следующий компонент:
const MyComponent = () => (
<div>
<Foo>
<Bar>
<Lee>
Hello!
</Lee>
</Bar>
</Foo>
</div>
)
Я хочу сделать его поверхностно, и я хочу проверить его в «черном ящике», чтобы у меня не было никаких знаний о подкомпонентах (Foo, Bar, Lee), и в конечном итоге я просто хочу убедиться, что он содержит текст «Hello!».
shallow(<MyComponent />).text()
просто возвращает <Foo />.
shallow(<MyComponent />).html()
Похоже, что он на самом деле копается в реализации каждого из этих подкомпонентов, может быть, побеждает цель быть мелкой (и, конечно, не тестом черного ящика)?
shallow(<MyComponent />).debug()
Честно говоря, это дает мнето, что я ожидал и мог бы делать заявления против, но это явно не намерение (и я бы предположил, не оптимизирован для производительности).
В документах это показывает что-то вроде
shallow(<MyComponent />).find("Lee").text()
, но это сочетает мой тест с реализацией MyComponent, что, безусловно, кажется нежелательным (по крайней мере, сделать его тестом белого ящика).
Какой лучший способ использовать мелкое для созданияутверждение, что компонент имеет содержаниеВы хотите, чтобы это было для теста черного ящика?