如何使用Enzyme淺表和基於組件的UI進行測試？

Question

我們正在使用語義React UI庫 。 該代碼通常如下所示：

<div className="EditTemplateMetaDataPage">
        <Page title={...}>
          <Container text>
            <Segment>
              <Grid columns={1}>
                <Grid.Column>
                  <Button ...>

對於許多人來說，使用類似的React Component庫（例如Material UI或Bootstrap React）可能會很有趣。

我們目前使用的mount與enzyme庫而不是shallow ，因為我們將使只有一級，到第一<Grid>在測試中，這僅僅是一個視覺助手組件，而我們真正需要更深埋藏Button來代替。

由於性能和避免重復測試 ，建議使用shallow 。 （我們遵循倫敦學校TDD的規定 ，僅檢查子組件是否存在以及它們的接口是否正確使用）

我們想出了僅將CSS用於視覺組件，即

<div className='ui one column grid'>

代替：

<Grid columns={1}>

但是我們不確定這是否是最佳方法。 您還有其他想法嗎？ 在這種情況下，我們如何使用shallow(...) ？

Answer 1

淺實際上允許您使用您的組件作為選擇器，因此您可以執行類似

import Button from '../Button'

const page = shallow(<Page />)

expect(page.find(Button).length).toBe(1)

http://airbnb.io/enzyme/docs/api/selector.html