如果你还不知道如何参加开源项目可以先阅读

一、初步调试

在/build/build-entry.js中将组件加入白名单

npm run dev

编译没出问题

浏览器打开 element.eleme.cn/#/zh-CN/com… 组件Example没有出来发现有错误

断点调试一下

简单改一下

居然就OK了

哈哈奥利给！！！可以PR了

二、修改文件结构

调整后的结构这个地方就不仔细说了。

三、VTU测试

接下来我们来重新编写测试Case，换用Vue3后需要使用vue-test-utils-next进行单元测试。其实从写法上讲比原有的测试方案要简便很多。

参考 /unit/mocks/timeline.spec.js下面的测试用例

运行测试

jest packages/timeline --watch

测试代码如下

import Timeline from '../Timeline.vue'
import { mount } from '@vue/test-utils'
describe('Timeline.vue', () => {
  it('should slot works', () => {
    const wrapper = mount(Timeline, {
      slots: {
        default: [`A`, `B`]
      }
    })
    expect(wrapper.find('.el-timeline').text()).toBe('AB')
  })

  it('should props reverse works', () => {
    const wrapper = mount(Timeline, {
      props: {
        reverse: true
      },
      slots: {
        default: [`A`, `B`]
      }
    })
    expect(wrapper.find('.el-timeline').text()).toBe('BA')
  })

  it('should slot null', () => {
    const wrapper = mount(Timeline, {})
    expect(wrapper.find('.el-timeline').text()).toBe('')
  })

  it('should slot empty array', () => {
    const wrapper = mount(Timeline, {
      slots: {
        default: []
      }
    })
    expect(wrapper.find('.el-timeline').text()).toBe('')
  })
})