我正在尝试使用shallow中的enzyme,并同时使用snapshots中的jest。
我面临的问题是我需要使用enzyme中的setState()
更改状态,然后将结果与快照匹配。
请参阅我的组件的代码:
....
getPrevProduct = () => {
const key = this.state.indexCurrent > 0 &&
this.productsKeys[this.state.indexCurrent - 1];
let product = null;
if (key) {
product = this.props.products[key];
}
return product;
}
renderPrev = () => this.getPrevProduct() && <PrevButton />;
render() {
return (
<div>
...
{this.renderPrev()}
...
<div>
)
}
前面的代码检查从currentIndex中的props传递的产品是否存在。
这就是为什么我需要酶来改变状态。然后,如果匹配,则必须呈现<PrevButton />
。
此测试是我希望将组件与快照匹配的时间:
const nextProps = {
products: {
test: 'test'
}
};
const tree = create(<Component nextProps={nextProps} />).toJSON();
expect(tree).toMatchSnapshot();
但我需要改变状态。我怎么能这样做?这不起作用:
it('should render component with prev button', () => {
const nextProps = {
products: {
test: 'test'
}
};
const instance = shallow(<Component nextProps={nextProps} />).instance()
instance.setState({
indexCurrent: 1
});
const tree = create(<Component nextProps={nextProps} />).toJSON();
expect(tree).toMatchSnapshot();
});
我还尝试将组件的声明保存到变量中,例如下一个未完成的代码,并在shallow
和create
中使用它:
const component = <Component nextProps={nextProps} />;
shallow(component).instance()).instance()
create(component).toJSON()`
我也试过没有运气enzyme-to-json。
你会做什么?
答案 0 :(得分:3)
可能不是enzyme-to-json
应该使用的方式。试试这个:
import { shallowToJson } from 'enzyme-to-json';
import { shallow } from 'enzyme';
然后在你的测试中:
const wrapper = shallow(<Component />);
expect(shallowToJson(wrapper)).toMatchSnapshot();
答案 1 :(得分:3)
安装enzyme-to-json
npm install --save-dev enzyme-to-json
更新您的玩笑配置:
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
}
测试
it('works', () => {
wrapper = shallow(<MyComponent />)
expect(wrapper).toMatchSnapshot()
})
答案 2 :(得分:1)
经过反复试验,我发现酶有一种方法,没有记录(或者我没有找到)称为getRenderOutput
。
该方法以JSON格式返回组件,因此我可以这样做:
it('should render component with prev button', () => {
const nextProps = {
products: {
test: 'test'
}
};
const render = shallow(mockComponent(nextProps))
const instance = render.instance();
instance.setState({
indexCurrent: 1
});
const tree = render.renderer.getRenderOutput();
expect(tree).toMatchSnapshot();
});
这就是我如何使用Jest的快照和酶。
getRenderOutput
的唯一问题是,如果我放入控制台日志,它将被打印两次。这是因为instance()
和getRenderOutput()
都会导致测试。
这是快照的输出:
exports[`ProductNavigator should render component with prev button 1`] = `
<div>
<FloatingActionButton
className="NavigatorButton left"
onTouchTap={[Function]}
secondary={true}
>
<KeyboardArrowLeft />
</FloatingActionButton>
</div>
`;
如果有人知道更好的方法,请添加评论。
谢谢!