如何进行React组件单元测试

Javascript单元测试框架对比

1. Jasmine

带有断言, spies(用来模拟函数的执行环境)和mocks.

2. AVA

优势是Javascript的异步特性和并发运行测试.

3. Tape

比较小的框架.

4. Mocha

使用比较多的一个库, 高级功能需要引用插件完成.

5. jest见下.

Enzyme

是一个React测试工具库, Enzyme提供渲染和遍历React组件的方法, 可以用来测试与React的render, mount和事件有关的断言.

另外还有其它一些库和配置可以做这个事情. enzyme有3种渲染方式:

(1) render: 渲染结果是普通的html结构.

(2) shallow: 渲染结果不是html的dom树, 而是react树, shallow只渲染当前组件,只能对当前组件做断言.

(3) mount: 渲染结果是react树, 会渲染当前组件以及所有子组件.

shallow和mount的结果是个封装的ReactWrapper, 可以时行多种操作, 譬如find() parents() children()等选择器进行元素查找, state(), props()进行数据查找, setState() setProprs操作数据, simulate模拟事件触发.

Jest

使用create-react-app产生的项目自带Jest作为测试框架, 不奇怪, 因为Jest和React一样都是出自Facebook. Jest为每个单元测试文件创造一个独立的运行环境,  因为线个单元测试文件之间再无纠葛, Jest可以启动多个进程同时运行不同的文件.

运行npm test 就可以进入交互式的"测试驱动开发"模式.

所有后缀为.test.js的文件都会被Jest认为是测试用例文件.

--coverage可以生成测试覆盖率报告.

1. 基本方法:

(1) 分组(Test Group): descripe(描述语, function)

(2) 测试用例(Test Case): test(描述语, function)

(3) 断言(Assert): expect(运行需测试的方法并返回实际结果).toBe(预期结果)

Pencil.query =(name, url)=> {  //方法，返回捕获
    // ?hello=test&wonghan=handsome
    var reg = new RegExp('(?:\\?|&)' + name + '=(.*?)(?:&|$)')
    var ret = reg.exec(url) || []
    return ret[1]
}
test('query',()=>{  // testCase
    // 断言
    expect(Pencil.query('hello', '?hello=test')).toBe('test')
    expect(Pencil.query('hello', '?hello2=test')).toBe(undefined)  
    //可以写多个`ecpect()`
})
test('query2',()=>{
    expect(Pencil.query('hello/test', '?hello/test=test')).toBe('test')
}) 
    //可以写多个`test()`
describe('test query',()=>{
    test('query3',()=>{  // testCase
        // assert
        expect(Pencil.query('hello', '?hello=test')).toBe('test')
        expect(Pencil.query('hello', '?hello2=test')).toBe(undefined)
    })
})

2. 配置

虽然Jest是零配置, 但也是可以配置

(1) 配置位置

• package.json添加 "jest": {配置项}
• jest.config.js添加配置项module.exports={配置项}
• 命令行

https://jestjs.io/docs/en/expect.html