在嵌套的反应导航组件上使用Jest进行快照测试-对象键发生更改，因此快照匹配失败 [英] Snapshot test with Jest on nested react-navigation component - Object keys change so Snapshot match fails
问题描述
当我在StackNavigator.test.js上运行玩笑测试时，由于生成的密钥，
When I run my jest test on my StackNavigator.test.js it always fails because of generated keys:
- Snapshot
+ Received
@@ -79,11 +79,11 @@
fromRoute={null}
index={0}
navigation={
Object {
"_childrenNavigation": Object {
- "**id-1542980055400-0**": Object {
+ "**id-1542980068677-0**": Object {
"actions": Object {
"dismiss": [Function],
"goBack": [Function],
"navigate": [Function],
"pop": [Function],
@@ -109,11 +109,11 @@
"replace": [Function],
"reset": [Function],
"router": undefined,
"setParams": [Function],
"state": Object {
- "key": "**id-1542980055400-0**",
+ "key": "**id-1542980068677-0**",
"routeName": "SignInOrRegister",
},
},
},
"actions": Object {
@@ -157,15 +157,15 @@
},
"setParams": [Function],
"state": Object {
"index": 0,
"isTransitioning": false,
- "key": "**id-1542980055400-1**",
+ "key": "**id-1542980068677-1**",
"routeName": "FluidTransitionNavigator",
"routes": Array [
Object {
- "key": "**id-1542980055400-0**",
+ "key": "**id-1542980068677-0**",
"routeName": "SignInOrRegister",
},
],
},
}
@@ -191,11 +191,11 @@
"overflow": "hidden",
},
undefined,
]
}
- toRoute="**id-1542980055400-0**"
+ toRoute="**id-1542980068677-0**"
>
<View
style={
Object {
"bottom": 0,
StackNavigator 组件使用'react-navigation'，并具有来自'react-navigation-fluid-过渡" :
The StackNavigator component uses 'react-navigation' and has a nested FluidTransition component from 'react-navigation-fluid-transitions':
StackNavigator.js
import React, { Component } from 'react';
import { Platform, Animated, Easing } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import { ThemeContext, getTheme } from 'react-native-material-ui';
import PropTypes from 'prop-types'
import FluidTransitionNavigator from './FluidTransitionNavigator';
import Dashboard from './../pages/Dashboard';
import Login from './../pages/Login';
import SignInOrRegister from './../pages/SignInOrRegister';
import UniToolbar from './UniToolbar';
const transitionConfig = () => {
return {
transitionSpec: {
duration: 1000,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
useNativeDriver: false,
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps
const thisSceneIndex = scene.index
const width = layout.initWidth
const translateX = position.interpolate({
inputRange: [thisSceneIndex - 1, thisSceneIndex],
outputRange: [width, 0],
})
return { transform: [ { translateX } ] }
},
}
}
const StackNavigator = createStackNavigator(
{
FluidTransitionNavigator: {
screen: FluidTransitionNavigator
},
Dashboard: {
screen: Dashboard
}
},
{
initialRouteName: 'FluidTransitionNavigator',
headerMode: 'float',
navigationOptions: (props) => ({
header: renderHeader(props)
}),
transitionConfig: transitionConfig
}
);
const renderHeader = (props) => {
let index = props.navigation.state.index;
const logout = (props.navigation.state.routeName === 'Dashboard');
let title = '';
switch (props.navigation.state.routeName) {
case 'Dashboard':
title = 'Dashboard';
break;
case 'FluidTransitionNavigator':
if (index !== undefined) {
switch (props.navigation.state.routes[index].routeName) {
case 'Login':
title = 'Sign In';
break;
case 'SignInOrRegister':
title = 'SignInOrRegister';
break;
default:
title = '';
}
}
break;
default:
title = '';
}
return (['SignInOrRegister', 'Sign In'].includes(title)) ? null : (
<ThemeContext.Provider value={getTheme(uiTheme)} >
<UniToolbar navigation={props.navigation} toolbarTitle={title} logout={logout} />
</ThemeContext.Provider>
);
};
renderHeader.propTypes = {
navigation: PropTypes.object
};
const uiTheme = {
toolbar: {
container: {
...Platform.select({
ios: {
height: 70
},
android: {
height: 76
}
})
},
},
};
export default StackNavigator;
以下是我的测试:
StackNavigator.test.js
import React from "react";
import renderer from "react-test-renderer";
import StackNavigator from "../StackNavigator";
test("renders correctly", () => {
const tree = renderer.create(<StackNavigator />).toJSON();
expect(tree).toMatchSnapshot();
});
I have seen a similar almost identical question here: Jest snapshot test failing due to react navigation generated key
接受的答案仍然无法回答我的问题.但是，它确实将我引向了另一个兔子洞:
The accepted answer still does not answer my question. It did however lead me down another rabbit hole:
我尝试使用内联匹配: expect(tree).toMatchInlineSnapshot()在运行yarn run test:unit之后生成树，然后尝试插入Any代替所有键.不幸的是，这没有用.<String>
I tried to use inline matching: expect(tree).toMatchInlineSnapshot() to generate the tree after running yarn run test:unit and then tried to insert Any<String> in place of all the keys. That did not work unfortunately.
我很困惑.我不知道该如何解决.我已经搜索了很多，尝试了多种方法来解决它，但我还是无法解决这个问题.
I'm stumped. I don't know how to resolve this. I have searched and searched, tried multiple things to get around it, I just can't solve this.
请有人帮我吗?
推荐答案
我解决了我的问题，但没有模拟其他情况下建议的Date.now.
I solved my problem, but not by mocking Date.now which was suggested in many other cases.
相反，我改编了在 https:/上找到的答案/github.com/react-navigation/react-navigation/issues/2269#issuecomment-369318490 由名为 joeybaker 的用户使用.
Instead I adapted an answer I found on https://github.com/react-navigation/react-navigation/issues/2269#issuecomment-369318490 by a user named joeybaker.
其理由如下:
对于您的测试目的，键并不是很重要.你什么 真正关心的是路线和索引.
The keys aren't really important for your testing purposes. What you really care about is the routes and the index.
他的代码如下，并假定在 Redux 中使用动作和缩减器:
His code is as follows and assumes the use of actions and reducers in Redux:
// keys are date and order-of-test based, so just removed them
const filterKeys = (state) => {
if (state.routes) {
return {
...state,
routes: state.routes.map((route) => {
const { key, ...others } = route
return filterKeys(others)
}),
}
}
return state
}
it('clears all other routes', () => {
const inputState = {}
const action = { type: AUTH_LOGOUT_SUCCESS }
const state = filterKeys(reducer(inputState, action))
expect(state.routes).toBe........
})
我已针对我的情况进行了调整(我尚未使用 Redux )，如下所示:
I have adapted this for my case (I do not use Redux yet) as follows:
test("renders correctly", () => {
const tree = renderer.create(<StackNavigator />);
const instance = tree.getInstance();
const state = filterKeys(instance.state.nav);
expect(state).toMatchSnapshot();
});
// keys are date and order-of-test based, so just removed them
const filterKeys = (state) => {
if (state.routes) {
return {
...state,
routes: state.routes.map((route) => {
const { key, ...others } = route
return filterKeys(others);
}),
}
}
return state;
};
呈现的测试如下:
// Jest Snapshot v1
exports[`renders correctly 1`] = `
Object {
"index": 0,
"isTransitioning": false,
"key": "StackRouterRoot",
"routes": Array [
Object {
"index": 0,
"isTransitioning": false,
"routeName": "FluidTransitionNavigator",
"routes": Array [
Object {
"routeName": "SignInOrRegister",
},
],
},
],
}
`;
这篇关于在嵌套的反应导航组件上使用Jest进行快照测试-对象键发生更改，因此快照匹配失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
