用酶开玩笑-连接组件的快照看起来与我的代码不同

Question

这是有效的酶快照吗？看起来不太像我的代码来定义组件。我认为dive()不能达到预期的结果吗？我在做什么错了？：

// Jest Snapshot v1

exports[`Rendering Should match snapshot - primary: primary 1`] = `
ShallowWrapper {
  Symbol(enzyme.__root__): [Circular],
  Symbol(enzyme.__unrendered__): <Connect(HeaderView)
    navigation={
      Object {
        "navigate": [MockFunction],
      }
    }
    openPageMenu={[MockFunction]}
    store={
      Object {
        "clearActions": [Function],
        "dispatch": [Function],
        "getActions": [Function],
        "getState": [Function],
        "replaceReducer": [Function],
        "subscribe": [Function],
      }
    }
    title="the title"
  />,
  Symbol(enzyme.__renderer__): Object {
    "batchedUpdates": [Function],
    "checkPropTypes": [Function],
    "getNode": [Function],
    "render": [Function],
    "simulateError": [Function],
    "simulateEvent": [Function],
    "unmount": [Function],
  },
  Symbol(enzyme.__node__): Object {
    "instance": null,
    "key": undefined,
    "nodeType": "function",
    "props": Object {
      "navigation": Object {
        "navigate": [MockFunction],
      },
      "openPageMenu": [Function],
      "store": Object {
        "clearActions": [Function],
        "dispatch": [Function],
        "getActions": [Function],
        "getState": [Function],
        "replaceReducer": [Function],
        "subscribe": [Function],
      },
      "title": "the title",
    },
    "ref": null,
    "rendered": null,
    "type": [Function],
  },
  Symbol(enzyme.__nodes__): Array [
    Object {
      "instance": null,
      "key": undefined,
      "nodeType": "function",
      "props": Object {
        "navigation": Object {
          "navigate": [MockFunction],
        },
        "openPageMenu": [Function],
        "store": Object {
          "clearActions": [Function],
          "dispatch": [Function],
          "getActions": [Function],
          "getState": [Function],
          "replaceReducer": [Function],
          "subscribe": [Function],
        },
        "title": "the title",
      },
      "ref": null,
      "rendered": null,
      "type": [Function],
    },
  ],
  Symbol(enzyme.__options__): Object {
    "adapter": ReactSixteenAdapter {
      "options": Object {
        "enableComponentDidUpdateOnSetState": true,
        "legacyContextMode": "parent",
        "lifecycles": Object {
          "componentDidUpdate": Object {
            "onSetState": true,
          },
          "getChildContext": Object {
            "calledByRenderer": false,
          },
          "getDerivedStateFromError": true,
          "getDerivedStateFromProps": Object {
            "hasShouldComponentUpdateBug": false,
          },
          "getSnapshotBeforeUpdate": true,
          "setState": Object {
            "skipsComponentDidUpdateOnNullish": true,
          },
        },
      },
    },
    "context": Object {},
    Symbol(enzyme.__providerValues__): Map {},
  },
  Symbol(enzyme.__providerValues__): Map {},
  Symbol(enzyme.__childContext__): Object {
    "storeSubscription": undefined,
  },
}
`;

exports[`Rendering Should match snapshot - secondary: secondary 1`] = `
ShallowWrapper {
  Symbol(enzyme.__root__): [Circular],
  Symbol(enzyme.__unrendered__): <Connect(HeaderView)
    navigation={
      Object {
        "navigate": [MockFunction],
      }
    }
    openPageMenu={[MockFunction]}
    store={
      Object {
        "clearActions": [Function],
        "dispatch": [Function],
        "getActions": [Function],
        "getState": [Function],
        "replaceReducer": [Function],
        "subscribe": [Function],
      }
    }
    title="secondary something"
  />,
  Symbol(enzyme.__renderer__): Object {
    "batchedUpdates": [Function],
    "checkPropTypes": [Function],
    "getNode": [Function],
    "render": [Function],
    "simulateError": [Function],
    "simulateEvent": [Function],
    "unmount": [Function],
  },
  Symbol(enzyme.__node__): Object {
    "instance": null,
    "key": undefined,
    "nodeType": "function",
    "props": Object {
      "navigation": Object {
        "navigate": [MockFunction],
      },
      "openPageMenu": [Function],
      "store": Object {
        "clearActions": [Function],
        "dispatch": [Function],
        "getActions": [Function],
        "getState": [Function],
        "replaceReducer": [Function],
        "subscribe": [Function],
      },
      "title": "secondary something",
    },
    "ref": null,
    "rendered": null,
    "type": [Function],
  },
  Symbol(enzyme.__nodes__): Array [
    Object {
      "instance": null,
      "key": undefined,
      "nodeType": "function",
      "props": Object {
        "navigation": Object {
          "navigate": [MockFunction],
        },
        "openPageMenu": [Function],
        "store": Object {
          "clearActions": [Function],
          "dispatch": [Function],
          "getActions": [Function],
          "getState": [Function],
          "replaceReducer": [Function],
          "subscribe": [Function],
        },
        "title": "secondary something",
      },
      "ref": null,
      "rendered": null,
      "type": [Function],
    },
  ],
  Symbol(enzyme.__options__): Object {
    "adapter": ReactSixteenAdapter {
      "options": Object {
        "enableComponentDidUpdateOnSetState": true,
        "legacyContextMode": "parent",
        "lifecycles": Object {
          "componentDidUpdate": Object {
            "onSetState": true,
          },
          "getChildContext": Object {
            "calledByRenderer": false,
          },
          "getDerivedStateFromError": true,
          "getDerivedStateFromProps": Object {
            "hasShouldComponentUpdateBug": false,
          },
          "getSnapshotBeforeUpdate": true,
          "setState": Object {
            "skipsComponentDidUpdateOnNullish": true,
          },
        },
      },
    },
    "context": Object {},
    Symbol(enzyme.__providerValues__): Map {},
  },
  Symbol(enzyme.__providerValues__): Map {},
  Symbol(enzyme.__childContext__): Object {
    "storeSubscription": undefined,
  },
}
`;

这是我的测试：

import { shallow, dive } from 'enzyme'
import React from 'react'
import Header from './view'
import configureStore from 'redux-mock-store'

function setup() {
  jest.mock('react-navigation', { withNavigation: (component) => component })
  const store = configureStore([])()
  const primaryProps = {
    navigation: { navigate: jest.fn() },
    openPageMenu: jest.fn(),
    title: 'the title'
  }
  const primaryComponent = shallow(<Header {...primaryProps} store={store} />)
    .dive()
    .dive()

  const secondaryProps = {
    navigation: { navigate: jest.fn() },
    openPageMenu: jest.fn(),
    title: 'secondary something'
  }
  const secondaryComponent = shallow(
    <Header {...secondaryProps} store={store} />
  )
    .dive()
    .dive()
  return {
    primaryComponent,
    secondaryComponent
  }
}

describe('Rendering', () => {
  it('Should match snapshot - primary', async () => {
    const { primaryComponent } = setup()
    expect(primaryComponent).toMatchSnapshot('primary')
  })
  it('Should match snapshot - secondary', async () => {
    const { secondaryComponent } = setup()
    expect(secondaryComponent).toMatchSnapshot('secondary')
  })
})

这是我的组成部分：

//@flow
import type { StatelessFunctionalView } from '../../../sharedModels/statelessFunctionalView'
import { connect } from 'react-redux'
import {
  Button,
  Text,
  Header as NbHeader,
  Body,
  Right,
  Left
} from 'native-base'
import Icon from 'react-native-vector-icons/EvilIcons'
import type { ActionCreator } from '../../../sharedModels/action'
import { headerStyle } from './style'
import React from 'react'
import { Image } from 'react-native'
import { styles } from '../../style'
import { withNavigation } from 'react-navigation'

type Header = {
  openPageMenu: ActionCreator<MenuAction>,
  title: string
}

let HeaderView: StatelessFunctionalView<Header> = (props: Header): NbHeader => {
  return (
    <NbHeader style={headerStyle}>
      <Left>
        <Button transparent onPress={() => props.navigation.openDrawer()}>
          <Icon
            name="navicon"
            style={{
              color: '#F0DFDF',
              fontSize: 36
            }}
          />
        </Button>
      </Left>
      <Body style={styles.title}>
        <Text style={styles.title}>{props.title}</Text>
      </Body>
      <Right>
        <Button transparent>
          <Image
            style={headerStyle.image}
            square
            source={require('../../../images/white_logo_only_100x119.png')}
          />
        </Button>
      </Right>
    </NbHeader>
  )
}

const mapDispatchToProps = (dispatch: Dispatch<*>): Object => ({
  openPageMenu: (): typeof undefined => {
    dispatch(openPageMenu())
  }
})

HeaderView = connect(
  null,
  mapDispatchToProps
)(HeaderView)

export default withNavigation(HeaderView)