如何使用Enzyme浅表和基于组件的UI进行测试？

Question

We are using the Semantic React UI library . The code often looks like:

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

This might be interesting for many people, using similar React Component libraries like Material UI or Bootstrap React.

We currently use mount with the enzyme library instead of shallow , because we would render only one level deep , to the first <Grid> component in a test, which is just a visual helper, while we really need the deeper buried Button instead.

Because of performance and to avoid overlapping tests it is recommended to use shallow . (We follow London school TDD , and check only that sub-components exist and their interfaces are used properly)

We came up with using CSS-only for visual components, ie

<div className='ui one column grid'>

instead of:

<Grid columns={1}>

But we are not sure, whether this is the optimal approach. Do you have other ideas? How can we use shallow(...) in this case?

Answer 1

shallow actually allow you to use your component as selector, so you can do something like

import Button from '../Button'

const page = shallow(<Page />)

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

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