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

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组件里面的