起因

因为我们团队开始使用antd的时候，很多组件不能把id和data-*的属性传递到真实的dom上去，而QC的自动化测试需要test-id（还要语义化），所以就决定使用className属性来添加测试id。但是添加className，一方面并不方便，我们className属性里面可能有其他操作；另外，也污染源代码。 所以就有想法做一个自动工具来添加，后面看了面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒觉得babel应该能做成这个事情。

emmm…一直拖到最近才把想法实现了一下。可惜，QC部门说用className性能太差了~~（what？其实我并不是很明白为什么说用class就慢了那么多…），还是要用id…真是给令人悲伤的事情…

然后我去antd issue列表上找了一下，发现还是有蛮多人提这个问题的，id现在大多数组件都支持了，data-*自定义属性也在逐步支持中。 有关id的讨论 有关data-*的讨论

babel-plugin-antd-test-class

用data-test手动设置className

<Input className="ant-input" data-test="custNo" />
<Select className={active ? 'active' : 'default'} data-test="user">...</Select>

    ↓ ↓ ↓ ↓ ↓ ↓

<Input className="ant-input Input-autotest-custNo" />
<Select className={(active ? 'active' : 'default') + " Select-autotest-user"}>...</Select>

通过FormItem或者getFieldDecorator自动找到语义化的名称

<FormItem
  colon={false}
  label={<FormattedMessage {...messages.custPartNo} />}
  {...label8Layout}
>
  {
    getFieldDecorator('custPart')(
      <Input />
    )
  }
</FormItem>

    ↓ ↓ ↓ ↓ ↓ ↓

<FormItem
    colon={false}
    label={<FormattedMessage {...messages.custPartNo} />}
    {...label8Layout}
  >
    {
      getFieldDecorator('custPart')(
        <Input className="Input-autotest-custPart" />
      )
    }
  </FormItem>

给table columns添加className

import { Table } from 'antd'

const columns = [{
  title: 'line',
  dataIndex: 'id'
}, {
  title: 'money',
  dataIndex: 'money',
  className: 'exist-class'
}, {
  title: 'condition',
  dataIndex: 'condition',
  className: isActive && 'active'
}]

    ↓ ↓ ↓ ↓ ↓ ↓

const columns = [{
  title: 'line',
  dataIndex: 'id',
  className: "col-autotest-id"
}, {
  title: 'money',
  dataIndex: 'money',
  className: "exist-class col-autotest-money"
}, {
  title: 'condition',
  dataIndex: 'condition',
  className: (isActive && 'active') + " col-autotest-condition"
}]

最后

放一下代码地址babel-plugin-antd-test-class 可能用不大上了，不过我觉得学习一下babel，ast的知识还是蛮好的。之后别人问起babel插件啥的，不用慌了(～￣▽￣)～