0.x - 2.4.3
0.x 的时候,大约两年前,也就是2015年,项目处于初始阶段,测试的组件相对比较少。只有这几个。
使用的测试也是react 内置的测试 "框架"-react-addons-test-utils 和 jest 框架
测试大概是这样的:
jest.dontMock('../components/button/button');
import React from 'react';
import TestUtils from 'react-addons-test-utils';
const Button = require('../components/button/button');
describe('Button', function() {
let button;
let buttonNode;
beforeEach(() => {
button = TestUtils.renderIntoDocument(
<Button>Follow</Button>
);
buttonNode = TestUtils.findRenderedDOMComponentWithTag(button, 'button');
});
it('should set the type to button by default', () => {
expect(buttonNode.type).toBe('button');
});
it('should set the default className to button', () => {
expect(buttonNode.className).toBe('ant-btn');
});
it('should has a whitespace in two Chinese charactor', () => {
button = TestUtils.renderIntoDocument(
<Button>按钮</Button>
);
buttonNode = TestUtils.findRenderedDOMComponentWithTag(button, 'button');
expect(buttonNode.textContent).toBe('按 钮');
});
});
代码片段1.1
可以看出测试的还是比较简单而且覆盖率很低。这种测试一直持续到2.5.0
2.5.0 - 2.5.2
时间到了九个月前,也就说2016年底的时候,项目的测试方案有了比较大的改动,单从目录结构上来看变化就非常大了。
一方面项目为了解决打包的时候出现文件丢失, 兼容问题等情况,做了一些处理,代码类似:
describe('antd dist files', function() {
const distFilesExisted = fs.existsSync(path.join(process.cwd(), 'dist', 'antd.js'));
if (!distFilesExisted) {
it('empty test case placeholder', () => {});
return;
}
const antd = require('../dist/antd');
// https://github.com/ant-design/ant-design/issues/1638
// https://github.com/ant-design/ant-design/issues/1968
it('should has modules in antd', () => {
expect('Affix' in antd).toBeTruthy();
expect('Alert' in antd).toBeTruthy();
...
});
// https://github.com/ant-design/ant-design/issues/1970
// https://github.com/ant-design/ant-design/issues/1804
it('should be compatible in IE8', () => {
const antdJsContent = fs.readFileSync(path.join(process.cwd(), 'dist', 'antd.js'));
expect(
antdJsContent.toString()
.indexOf('function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }')
).toBe(-1);
})
});
代码片段 2.1
同时项目引用了一个enzyme-to-json的库,该库功能提供类似 jest 的 snapshots 功能,同时利用了enzyme强大的shadow render 。以及 setState, find 能力。其实它们的文档就是测试用例。 也就说它们会将文档的sample 作为运行结果结果作为screenshot存起来,期望每次修改代码不影响sample代码运行,这样就算测试通过。 可以说是一次 break change。
import glob from 'glob'
import { render } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import MockDate from 'mockdate';
export default function demoTest(component, options = {}) {
const files = glob.sync(`./components/${component}/demo/*.md`);
files.forEach(file => {
let testMethod = options.skip === true ? test.skip : test;
if (Array.isArray(options.skip) && options.skip.some(c => file.includes(c))) {
testMethod = test.skip;
}
testMethod(`renders ${file} correctly`, () => {
MockDate.set(new Date('2016-11-22').getTime() + new Date().getTimezoneOffset() * 60 * 1000);
const demo = require('../.' + file);
const wrapper = render(demo);
expect(renderToJson(wrapper)).toMatchSnapshot();
MockDate.reset();
});
});
}
代码片段2.2
那么他们的根据demo的文档(markdown文件)render组件是怎么做到的呢?
其实他们在项目中webpack引用了 antd-tools (一个专门为antd 设计的库),这个库中有一个文件是专门为jest做预处理的, 叫demoPreprocessor.js
摘取部分代码:
function getCode(tree) {
let code;
const find = (node) => {
if (code) return;
if (!JsonML.isElement(node)) return;
if (JsonML.getTagName(node) !== 'pre') {
JsonML.getChildren(node).forEach(find);
return;
}
code = JsonML.getChildren(
JsonML.getChildren(node)[0] || ''
)[0] || '';
};
find(tree);
return code;
}
2.5.3 - 至今
八个月前, 2017年年初。项目主要贡献者 benjycui 写了一个工具库代替了上述的代码片段2.1,这个库的名字是dekko,同时项目开发者认为,测试用例应该放在组件之中,因此精简到了下图所示:
__snapshots__ 引用 组件中的测试用例。 组件测试用例又更具组件文档的sample 生成 screenshots,然后每次生成,每次对比,如果一致则通过,反之则不通过。
exports[`antd dist files exports modules correctly 1`] = `
Array [
"Affix",
"Anchor",
"AutoComplete",
"Alert",
"BackTop",
"Badge",
"Breadcrumb",
"Button",
"Calendar",
"Card",
"Collapse",
"Carousel",
"Cascader",
"Checkbox",
"Col",
"DatePicker",
"Dropdown",
"Form",
"Icon",
"Input",
"InputNumber",
"LocaleProvider",
"message",
"Menu",
"Modal",
"notification",
"Pagination",
"Popconfirm",
"Popover",
"Progress",
"Radio",
"Rate",
"Row",
"Select",
"Slider",
"Spin",
"Steps",
"Switch",
"Table",
"Transfer",
"Tree",
"TreeSelect",
"Tabs",
"Tag",
"TimePicker",
"Timeline",
"Tooltip",
"Mention",
"Upload",
]
`;