React-Native 应用的 Jest 测试 Animated.View
Jest test Animated.View for React-Native app
我尝试使用 Jest for React-Native 测试 Animated.View。当我将 属性 visible 设置为 true 时，它应该将我的视图从 opacity 0 动画化为 opacity 1.
这是我的组件呈现的内容：
<Animated.View
style={{
opacity: opacityValue,
}}
>
<Text>{message}</Text>
</Animated.View>
其中 opacityValue 在道具 visible 更改时更新：
Animated.timing(
this.opacityValue, {
toValue: this.props.visible ? 1 : 0,
duration: 350,
},
).start(),
我想确保在将视图设置为 属性 visible=true 时可见。尽管视图变得可见需要一些时间并且随着测试运行，不透明度等于 0.
这是我的测试吧：
it('Becomes visible when visible=true', () => {
const tree = renderer.create(
<MessageBar
visible={true}
/>
).toJSON();
expect(tree).toMatchSnapshot();
});
我在想我怎么能让 Jest 等呢？或者我如何测试它以确保当我将道具设置为 true 时视图变得可见？
谢谢。
我通过为测试创建一个动画存根解决了这个问题。
我看到您正在使用 visible 作为 属性，所以一个有效的例子是：
组件代码
import React from 'react';
import { Animated, Text, View, TouchableOpacity } from 'react-native';
// This class will control the visible prop
class AnimatedOpacityController extends React.Component {
constructor(props, ctx) {
super(props, ctx);
this.state = {
showChild: false,
};
}
render() {
const { showChild } = this.state;
return (
<View>
<AnimatedOpacity visible={this.state.showChild} />
<TouchableOpacity onPress={() => this.setState({ showChild: !showChild })}>
<Text>{showChild ? 'Hide' : 'Show' } greeting</Text>
</TouchableOpacity>
</View>
);
}
}
// This is your animated Component
class AnimatedOpacity extends React.Component {
constructor(props, ctx) {
super(props, ctx);
this.state = {
opacityValue: new Animated.Value(props.visible ? 1 : 0),
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.visible !== this.props.visible) {
this._animate(nextProps.visible);
}
}
_animate(visible) {
Animated.timing(this.state.opacityValue, {
toValue: visible ? 1 : 0,
duration: 350,
}).start();
}
render() {
return (
<Animated.View style={{ opacity: this.state.opacityValue }}>
<Text>Hello World</Text>
</Animated.View>
);
}
}
export { AnimatedOpacityController, AnimatedOpacity };
现在开始测试
import React from 'react';
import renderer from 'react-test-renderer';
import { shallow } from 'enzyme';
import { AnimatedOpacityController, AnimatedOpacity } from '../AnimatedOpacity';
jest.mock('Animated', () => {
const ActualAnimated = require.requireActual('Animated');
return {
...ActualAnimated,
timing: (value, config) => {
return {
start: (callback) => {
value.setValue(config.toValue);
callback && callback()
},
};
},
};
});
it('renders visible', () => {
expect(
renderer.create(
<AnimatedOpacity visible={true} />
).toJSON()
).toMatchSnapshot();
});
it('renders invisible', () => {
expect(
renderer.create(
<AnimatedOpacity visible={false} />
).toJSON()
).toMatchSnapshot();
});
it('makes transition', () => {
const component = shallow(<AnimatedOpacityController />);
expect(renderer.create(component.node).toJSON()).toMatchSnapshot();
component.find('TouchableOpacity').simulate('press');
expect(renderer.create(component.node).toJSON()).toMatchSnapshot();
component.find('TouchableOpacity').simulate('press');
expect(renderer.create(component.node).toJSON()).toMatchSnapshot();
});
现在生成的快照将具有预期的不透明度值。
如果你经常使用动画，你可以将你的模拟移动到 js/config/jest 并编辑你 package.json 以在你的所有测试中使用它，然后对你的存根所做的任何更改都将适用于所有测试。
已编辑：
上面的解法只解决了从头到尾的问题。更精细的解决方案是：
- 不要嘲笑动画
- 开玩笑配置 make
global.requestAnimationFrame = null
- 使用 mockdate 模拟日期
- 使用jest.runTimersToTime进行时间旅行
时间旅行函数是
const timeTravel = (ms, step = 100) => {
const tickTravel = v => {
jest.runTimersToTime(v);
const now = Date.now();
MockDate.set(new Date(now + v));
}
let done = 0;
while (ms - done > step) {
tickTravel(step);
done += step;
}
tickTravel(ms - done);
};
由于动画内部行为，将步骤分成小块很重要。
Aspirina 的 EDIT 有助于解决这个问题，但它并没有直接完成工作。对于后面的人，这就是我解决模拟动画进度问题的方法：
我正在使用 Jest - 这是我的 setupTests.js 引导测试环境的脚本
const MockDate = require('mockdate')
const frameTime = 10
global.requestAnimationFrame = (cb) => {
// Default implementation of requestAnimationFrame calls setTimeout(cb, 0),
// which will result in a cascade of timers - this generally pisses off test runners
// like Jest who watch the number of timers created and assume an infinite recursion situation
// if the number gets too large.
//
// Setting the timeout simulates a frame every 1/100th of a second
setTimeout(cb, frameTime)
}
global.timeTravel = (time = frameTime) => {
const tickTravel = () => {
// The React Animations module looks at the elapsed time for each frame to calculate its
// new position
const now = Date.now()
MockDate.set(new Date(now + frameTime))
// Run the timers forward
jest.advanceTimersByTime(frameTime)
}
// Step through each of the frames
const frames = time / frameTime
let framesEllapsed
for (framesEllapsed = 0; framesEllapsed < frames; framesEllapsed++) {
tickTravel()
}
}
这里的想法是我们将 requestAnimationFrame 速率减慢到正好 100 fps，而 timeTravel 函数允许您以一帧的时间增量前进。这是一个如何使用它的示例（假设我有一个需要一秒钟才能完成的动画）：
beforeEach(() => {
// As part of constructing the Animation, it will grab the
// current time. Mocking the date right away ensures everyone
// is starting from the same time
MockDate.set(0)
// Need to fake the timers for timeTravel to work
jest.useFakeTimers()
})
describe('half way through animation', () => {
it('has a bottom of -175', () => {
global.timeTravel(500)
expect(style.bottom._value).toEqual(-175)
})
})
describe('at end of animation', () => {
it('has a bottom of 0', () => {
global.timeTravel(1000)
expect(style.bottom._value).toEqual(0)
})
})
就我而言，我根本没有使用 Animated.View。但是，我有一个使用 requestAnimationFrame 的组件。回调实际上使用了 time 参数，所以我不得不在替换 requestAnimationFrame 时将当前时间传递给回调函数，如下所示：
global.requestAnimationFrame = (cb) => {
setTimeout(() => cb(Date.now()), frameTime)
}
您可以模拟 Animated.View，使其在测试时表现得像常规视图。
jest.mock('react-native', () => {
const rn = jest.requireActual('react-native')
const spy = jest.spyOn(rn.Animated, 'View', 'get')
spy.mockImplementation(() => jest.fn(({children}) => children));
return rn
});
我改编自 React Transition Group 的 example of mocking Transition Groups
您可以通过以下方式模拟Animated.createAnimatedComponent
jest.mock('react-native', () => {
const rn = jest.requireActual('react-native');
const spy = jest.spyOn(rn.Animated, 'createAnimatedComponent');
spy.mockImplementation(() => jest.fn(() => null));
return rn;
});
我尝试使用 Jest for React-Native 测试 Animated.View。当我将 属性 visible 设置为 true 时，它应该将我的视图从 opacity 0 动画化为 opacity 1.
这是我的组件呈现的内容：
<Animated.View
style={{
opacity: opacityValue,
}}
>
<Text>{message}</Text>
</Animated.View>
其中 opacityValue 在道具 visible 更改时更新：
Animated.timing(
this.opacityValue, {
toValue: this.props.visible ? 1 : 0,
duration: 350,
},
).start(),
我想确保在将视图设置为 属性 visible=true 时可见。尽管视图变得可见需要一些时间并且随着测试运行，不透明度等于 0.
这是我的测试吧：
it('Becomes visible when visible=true', () => {
const tree = renderer.create(
<MessageBar
visible={true}
/>
).toJSON();
expect(tree).toMatchSnapshot();
});
我在想我怎么能让 Jest 等呢？或者我如何测试它以确保当我将道具设置为 true 时视图变得可见？
谢谢。
我通过为测试创建一个动画存根解决了这个问题。
我看到您正在使用 visible 作为 属性，所以一个有效的例子是：
组件代码
import React from 'react';
import { Animated, Text, View, TouchableOpacity } from 'react-native';
// This class will control the visible prop
class AnimatedOpacityController extends React.Component {
constructor(props, ctx) {
super(props, ctx);
this.state = {
showChild: false,
};
}
render() {
const { showChild } = this.state;
return (
<View>
<AnimatedOpacity visible={this.state.showChild} />
<TouchableOpacity onPress={() => this.setState({ showChild: !showChild })}>
<Text>{showChild ? 'Hide' : 'Show' } greeting</Text>
</TouchableOpacity>
</View>
);
}
}
// This is your animated Component
class AnimatedOpacity extends React.Component {
constructor(props, ctx) {
super(props, ctx);
this.state = {
opacityValue: new Animated.Value(props.visible ? 1 : 0),
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.visible !== this.props.visible) {
this._animate(nextProps.visible);
}
}
_animate(visible) {
Animated.timing(this.state.opacityValue, {
toValue: visible ? 1 : 0,
duration: 350,
}).start();
}
render() {
return (
<Animated.View style={{ opacity: this.state.opacityValue }}>
<Text>Hello World</Text>
</Animated.View>
);
}
}
export { AnimatedOpacityController, AnimatedOpacity };
现在开始测试
import React from 'react';
import renderer from 'react-test-renderer';
import { shallow } from 'enzyme';
import { AnimatedOpacityController, AnimatedOpacity } from '../AnimatedOpacity';
jest.mock('Animated', () => {
const ActualAnimated = require.requireActual('Animated');
return {
...ActualAnimated,
timing: (value, config) => {
return {
start: (callback) => {
value.setValue(config.toValue);
callback && callback()
},
};
},
};
});
it('renders visible', () => {
expect(
renderer.create(
<AnimatedOpacity visible={true} />
).toJSON()
).toMatchSnapshot();
});
it('renders invisible', () => {
expect(
renderer.create(
<AnimatedOpacity visible={false} />
).toJSON()
).toMatchSnapshot();
});
it('makes transition', () => {
const component = shallow(<AnimatedOpacityController />);
expect(renderer.create(component.node).toJSON()).toMatchSnapshot();
component.find('TouchableOpacity').simulate('press');
expect(renderer.create(component.node).toJSON()).toMatchSnapshot();
component.find('TouchableOpacity').simulate('press');
expect(renderer.create(component.node).toJSON()).toMatchSnapshot();
});
现在生成的快照将具有预期的不透明度值。
如果你经常使用动画，你可以将你的模拟移动到 js/config/jest 并编辑你 package.json 以在你的所有测试中使用它，然后对你的存根所做的任何更改都将适用于所有测试。
已编辑：
上面的解法只解决了从头到尾的问题。更精细的解决方案是：
- 不要嘲笑动画
- 开玩笑配置 make
global.requestAnimationFrame = null - 使用 mockdate 模拟日期
- 使用jest.runTimersToTime进行时间旅行
时间旅行函数是
const timeTravel = (ms, step = 100) => {
const tickTravel = v => {
jest.runTimersToTime(v);
const now = Date.now();
MockDate.set(new Date(now + v));
}
let done = 0;
while (ms - done > step) {
tickTravel(step);
done += step;
}
tickTravel(ms - done);
};
由于动画内部行为，将步骤分成小块很重要。
Aspirina 的 EDIT 有助于解决这个问题，但它并没有直接完成工作。对于后面的人，这就是我解决模拟动画进度问题的方法：
我正在使用 Jest - 这是我的 setupTests.js 引导测试环境的脚本
const MockDate = require('mockdate')
const frameTime = 10
global.requestAnimationFrame = (cb) => {
// Default implementation of requestAnimationFrame calls setTimeout(cb, 0),
// which will result in a cascade of timers - this generally pisses off test runners
// like Jest who watch the number of timers created and assume an infinite recursion situation
// if the number gets too large.
//
// Setting the timeout simulates a frame every 1/100th of a second
setTimeout(cb, frameTime)
}
global.timeTravel = (time = frameTime) => {
const tickTravel = () => {
// The React Animations module looks at the elapsed time for each frame to calculate its
// new position
const now = Date.now()
MockDate.set(new Date(now + frameTime))
// Run the timers forward
jest.advanceTimersByTime(frameTime)
}
// Step through each of the frames
const frames = time / frameTime
let framesEllapsed
for (framesEllapsed = 0; framesEllapsed < frames; framesEllapsed++) {
tickTravel()
}
}
这里的想法是我们将 requestAnimationFrame 速率减慢到正好 100 fps，而 timeTravel 函数允许您以一帧的时间增量前进。这是一个如何使用它的示例（假设我有一个需要一秒钟才能完成的动画）：
beforeEach(() => {
// As part of constructing the Animation, it will grab the
// current time. Mocking the date right away ensures everyone
// is starting from the same time
MockDate.set(0)
// Need to fake the timers for timeTravel to work
jest.useFakeTimers()
})
describe('half way through animation', () => {
it('has a bottom of -175', () => {
global.timeTravel(500)
expect(style.bottom._value).toEqual(-175)
})
})
describe('at end of animation', () => {
it('has a bottom of 0', () => {
global.timeTravel(1000)
expect(style.bottom._value).toEqual(0)
})
})
就我而言，我根本没有使用 Animated.View。但是，我有一个使用 requestAnimationFrame 的组件。回调实际上使用了 time 参数，所以我不得不在替换 requestAnimationFrame 时将当前时间传递给回调函数，如下所示：
global.requestAnimationFrame = (cb) => {
setTimeout(() => cb(Date.now()), frameTime)
}
您可以模拟 Animated.View，使其在测试时表现得像常规视图。
jest.mock('react-native', () => {
const rn = jest.requireActual('react-native')
const spy = jest.spyOn(rn.Animated, 'View', 'get')
spy.mockImplementation(() => jest.fn(({children}) => children));
return rn
});
我改编自 React Transition Group 的 example of mocking Transition Groups
您可以通过以下方式模拟Animated.createAnimatedComponent
jest.mock('react-native', () => {
const rn = jest.requireActual('react-native');
const spy = jest.spyOn(rn.Animated, 'createAnimatedComponent');
spy.mockImplementation(() => jest.fn(() => null));
return rn;
});