jest的快照不能生成

Question

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`test PriceList component  should render the component to match snapshot 1`] = `ShallowWrapper {}`;

为啥最终的输出是这样子呢？

Answer 1

张轩 2019-12-16 16:05:26

同学你好 新版的 jest （24版本以上），使用 jest 和 enzyme 生成快照需要使用 enzyme-to-json 这个库：https://github.com/adriantoine/enzyme-to-json 

• 提问者 慕尼黑7354265 #1

  谢谢老师！ 老师最近有新的react课程上线吗？？

• 张轩 回复 提问者 慕尼黑7354265 #2

  明年年初有非常有挑战性的课上线 哈哈

• 爱笑的小熊猫 回复 张轩 #3

  期待老师的新课程 之前会有直播来剧透新课内容嘛

Answer 2

提问者 慕尼黑7354265 2019-12-15 22:13:19

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

import React from 'react' import {shallow} from 'enzyme' import PriceList from '../PriceList' import {items,categories} from '../../containers/Home' import Ionicon from 'react-ionicons'   const itemsWidthCategory = items.map(item => { item.category = categories[item.cid] return item })   const props = { items:itemsWidthCategory, onModifyItem:jest.fn(), onDeleteItem:jest.fn() }   describe('test PriceList component ', () => { let wrapper beforeEach(()=>{ wrapper = shallow(<PriceList {...props} />) }) it('should render the component to match snapshot',()=>{ expect(wrapper).toMatchSnapshot() }) it('should render correct price items length',()=>{ expect(wrapper.find('.list-group-item').length).toEqual(itemsWidthCategory.length) }) it('should render correct icon and price for each item',()=>{ const iconLists = wrapper.find('.list-group-item').first().find(Ionicon) expect(iconLists.length).toEqual(3) expect(iconLists.first().props().icon).toEqual(itemsWidthCategory[0].category.iconName) }) // 模拟点击 it('should trigger the correct function callbacks',()=>{ const firstItem = wrapper.find('.list-group-item').first() firstItem.find('.modify').simulate('click') expect(props.onModifyItem).toHaveBeenCalledWith(itemsWidthCategory[0]) firstItem.find('.delete').simulate('click') expect(props.onDeleteItem).toHaveBeenCalledWidth() }) });

Answer 3

张轩 2019-12-15 09:07:06

同学你好 看起来你的组件应该有点问题 是空的 你能提供一下对应的代码嘛

• 提问者 慕尼黑7354265 #1

  老师我贴上来了 这个是priceList组件里面的