当我在StackNavigator.test.js上执行笑话测试时，由于生成的密钥，它总是失败：
- 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部件用途“反应导航”和具有嵌套FluidTransition从部件“反应导航流体跃迁”：
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();
});
我在这里看到了一个几乎相同的问题：Jest快照测试由于响应导航生成的密钥而失败
接受的答案仍然无法回答我的问题。但是，它确实把我引向了另一个兔子洞：
我尝试使用内联匹配： expect(tree).toMatchInlineSnapshot()运行后生成树yarn run test:unit，然后尝试插入所有键。不幸的是，这没有奏效。Any<String>
我很沮丧 我不知道该如何解决。我已经搜索了很多，尝试了多种方法来解决它，但是我还是无法解决。
有人可以帮我吗？
我解决了我的问题，但没有通过嘲笑Date.now来解决，在许多其他情况下都建议这样做。
相反，我改编了一个名为joeybaker的用户在https://github.com/react-navigation/react-navigation/issues/2269#issuecomment-369318490上找到的答案。
给出的理由如下：
这些键对于您的测试目的并不是很重要。您真正关心的是路线和索引。
他的代码如下，并假设在Redux中使用了action和reducers ：
// 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），如下所示：
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",
},
],
},
],
}
`;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句