React native Jest with Ezyme-连接组件的快照与我的代码看起来不同

这是有效的酶快照吗？定义组件看起来不像我的代码。我认为

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,
  },
}
`;

//Jest快照v1
导出[`渲染应与快照匹配-主：主1`]=`
浅层振打器{
符号（酶根）：[圆形]，
符号（酶未描述）：，
符号（酶渲染器）：对象{
“BatchedUpdate”：[函数]，
“checkPropTypes”：[函数]，
“getNode”：[函数]，
“呈现”：[函数]，
“simulateError”：[函数]，
“simulateEvent”：[功能]，
“卸载”：[功能]，
},
符号（酶节点）：对象{
“实例”：空，
“键”：未定义，
“节点类型”：“函数”，
“道具”：物体{
“导航”：对象{
“导航”：[MockFunction]，
},
“openPageMenu”：[功能]，
“存储”：对象{
“clearActions”：[功能]，
“调度”：[功能]，
“getActions”：[函数]，
“getState”：[函数]，
“replaceReducer”：[函数]，
“订阅”：[功能]，
},
“头衔”：“头衔”，
},
“ref”：空，
“呈现”：空，
“类型”：[函数]，
},
符号（酶节点）：数组[
反对{
“实例”：空，
“键”：未定义，
“节点类型”：“函数”，
“道具”：物体{
“导航”：对象{
“导航”：[MockFunction]，
},
“openPageMenu”：[功能]，
“存储”：对象{
“clearActions”：[功能]，
“调度”：[功能]，
“getActions”：[函数]，
“getState”：[函数]，
“replaceReducer”：[函数]，
“订阅”：[功能]，
},
“头衔”：“头衔”，
},
“ref”：空，
“呈现”：空，
“类型”：[函数]，
},
],
符号（酶选项）：对象{
“适配器”：第十六个适配器{
“选项”：对象{
“enableComponentDidUpdateOnSetState”：true，
“legacyContextMode”：“父级”，
“生命周期”：对象{
“componentDidUpdate”：对象{
“onSetState”：正确，
},
“getChildContext”：对象{
“calledByRenderer”：false，
},
“getDerivedStateFromError”：true，
“getDerivedStateFromProps”：对象{
“hasShouldComponentUpdateBug”：false，
},
“getSnapshotBeforeUpdate”：true，
“设置状态”：对象{
“skipsComponentDidUpdateOnNullish”：true，
},
},
},
},
“上下文”：对象{}，
符号（酶提供程序值）：映射{}，
},
符号（酶提供程序值）：映射{}，
符号（酶.\uuuu儿童上下文）：对象{
“storeSubscription”：未定义，
},
}
`;
导出[`渲染应与快照匹配-辅助：辅助1`]=`
浅层振打器{
符号（酶根）：[圆形]，
符号（酶未描述）：，
符号（酶渲染器）：对象{
“BatchedUpdate”：[函数]，
“checkPropTypes”：[函数]，
“getNode”：[函数]，
“呈现”：[函数]，
“simulateError”：[函数]，
“simulateEvent”：[功能]，
“卸载”：[功能]，
},
符号（酶节点）：对象{
“实例”：空，
“键”：未定义，
“节点类型”：“函数”，
“道具”：物体{
“导航”：对象{
“导航”：[MockFunction]，
},
“openPageMenu”：[功能]，
“存储”：对象{
“clearActions”：[功能]，
“调度”：[功能]，
“getActions”：[函数]，
“getState”：[函数]，
“replaceReducer”：[函数]，
“订阅”：[功能]，
},
“头衔”：“次要的东西”，
},
“ref”：空，
“呈现”：空，
“类型”：[函数]，
},
符号（酶节点）：数组[
反对{
“实例”：空，
“键”：未定义，
“节点类型”：“函数”，
“道具”：物体{
“导航”：对象{
“导航”：[MockFunction]，
},
“openPageMenu”：[功能]，
“存储”：对象{
“clearActions”：[功能]，
“调度”：[功能]，
“getActions”：[函数]，
“getState”：[函数]，
“replaceReducer”：[函数]，
“订阅”：[功能]，
},
“头衔”：“次要的东西”，
},
“ref”：空，
“呈现”：空，
“类型”：[函数]，
},
],
符号（酶选项）：对象{
“适配器”：第十六个适配器{
“选项”：对象{
“enableComponentDidUpdateOnSetState”：true，
“legacyContextMode”：“父级”，
“生命周期”：对象{
“componentDidUpdate”：对象{
“onSetState”：正确，
},
“getChildContext”：对象{
“calledByRenderer”：false，
},
“getDerivedStateFromError”：true，
“getDerivedStateFromProps”：对象{
“hasShouldComponentUpdateBug”：false，
},
“getSnapshotBeforeUpdate”：true，
“设置状态”：对象{
“skipsComponentDidUpdateOnNullish”：true，
},
},
},
},
“上下文”：对象{}，
符号（酶提供程序值）：映射{}，
},
符号（酶提供程序值）：映射{}，
符号（酶.\uuuu儿童上下文）：对象{
“storeSubscription”：未定义，
},
}
`;

以下是我的测试：

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

从“酶”导入{shallow，dive}
从“React”导入React
从“./view”导入标题
从“redux模拟存储”导入配置存储
函数设置（）{
mock（'react-navigation'，{withNavigation:（组件）=>component}）
常量存储=配置存储（[]）（）
常量primaryProps={
导航：{navigate:jest.fn（）}，
openPageMenu:jest.fn（），
标题：“标题”
}
常量primaryComponent=浅（）
.潜水
.潜水
const secondaryProps={
导航
//@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)