[英]How to test a React component that update over time with Jest and Enzyme?
I have this React Component 我有这个React组件
export class Timer extends Component {
constructor(props) {
super(props);
this.state = {i : props.i};
}
componentDidMount(){
this.decrementCounter();
}
decrementCounter(){
if(this.state.i < 1){
return;
}
setTimeout(() => {
this.setState({i : this.state.i - 1})
this.decrementCounter()}, 1000);
}
render(){
return <span>{this.state.i}</span>
}}
And I want to express a test like this 我想表达这样的测试
jest.useFakeTimers();
it('should decrement timer ', () => {
const wrapper = shallow(<Timer i={10} />);
expect(wrapper.text()).toBe("10");
jest.runOnlyPendingTimers();
expect(wrapper.text()).toBe("9");
});
currently the first expect pass but the second fails 当前第一个期望通过,但是第二个失败
Expected value to be (using ===):
"9"
Received:
"10"
How can I properly test this component ? 如何正确测试此组件?
Use Full Rendering API, mount(...) 使用完整渲染API,mount(...)
Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs, or may require the full lifecycle in order to fully test the component (ie, componentDidMount etc.)
对于具有可能与DOM API交互或可能需要完整生命周期才能完全测试组件的组件 (即componentDidMount等)的用例,完整的DOM呈现是理想的选择。
You can use mount()
instead of shallow()
like 您可以使用
mount()
代替shallow()
例如
import React from 'react';
import { mount, /* shallow */ } from 'enzyme';
import Timer from './index';
describe('Timer', () => {
it('should decrement timer ', () => {
jest.useFakeTimers();
const wrapper = mount(<Timer i={10} />);
expect(wrapper.text()).toBe("10");
jest.runOnlyPendingTimers();
expect(wrapper.text()).toBe("9");
jest.useRealTimers();
});
});
Or you can pass additional object to shallow
to instrument it to run lifecycle methods 或者,您可以将其他对象传递给
shallow
以检测其运行生命周期方法
options.disableLifecycleMethods: (Boolean [optional]): If set to true, componentDidMount is not called on the component, and componentDidUpdate is not called after setProps and setContext.
options.disableLifecycleMethods:(布尔值[可选]):如果设置为true,则不对组件调用componentDidMount,并且在setProps和setContext之后不调用componentDidUpdate。
const options = {
lifecycleExperimental: true,
disableLifecycleMethods: false
};
const wrapper = shallow(<Timer i={10} />, options);
I tested it. 我测试了 It works.
有用。
hinok:~/workspace $ npm test
> c9@0.0.0 test /home/ubuntu/workspace
> jest
PASS ./index.spec.js (7.302s)
Timer
✓ should decrement timer (28ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 8.162s
Ran all test suites.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.