2024年软件测试最新React+Redux单元测试一小时入门，2024年最新不了解这些多线程的基础知识很难学懂软件测试

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

import * as Validators from ‘helpers/validator’

describe(‘helpers/validator’, () => {
describe(‘Function: checkUsername’, () => {
it(‘Should not return error while input foobar.’, () => {
expect(Validators.checkUsername(‘foobar’)).to.be.empty
})
it(‘Should return error while empty.’, () => {
expect(Validators.checkUsername(‘’)).to.equal(‘用户名必须为1-15个字’)
})
it(‘Should return error while more then 15 words.’, () => {
expect(Validators.checkUsername(‘abcdefghijklmnop’)).to.equal(‘用户名必须为1-15个字’)
expect(Validators.checkUsername(‘一二三四五六七八九十一二三四五六’)).to.equal(‘用户名必须为1-15个字’)
})
})
})

describe可以多次嵌套使用，更清晰的描述测试功能的结构。执行单元测试:   
`babel-node ./node_modules/karma/bin/karma start build/karma.conf`


![图片描述](https://image-static.segmentfault.com/182/684/1826849550-57ba6293b61ec_articlex "图片描述")


### 三、component测试


在 redux 的理念中，react 组件应该分为视觉组件 component 和 高阶组件 container，`UI与逻辑分离，更利于测试`。redux 的 example 里，这两种组件一般都分开文件去存放。本人认为，如果视觉组件需要多次复用，应该与container分开来写，但如果基本不复用，或者可以复用的组件已经专门组件化了(下面例子就是)，那就没必要分开写，可以写在一个文件里更方便管理，然后通过 `export` 和 `export default` 分别输出

/* componets/Register.js */

import React, { Component, PropTypes } from ‘react’
import { connect } from ‘react-redux’
import {
FormGroup,
FormControl,
FormLabel,
FormError,
FormTip,
Button,
TextInput
} from ‘componentPath/basic/form’

export class Register extends Component {
render () {
const { register, onChangeUsername, onSubmit } = this.props
<div style={{padding: ‘50px 130px’}}>

用户名


请输入用户名
{register.usernameError}



提交


}
}

Register.propTypes = {
register: PropTypes.object.isRequired,
onChangeUsername: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired
}

const mapStateToProps = (state) => {
return {
register: state.register
}
}

const mapDispatchToProps = (dispatch) => {
return {
onChangeUsername: name => {
…
},
onSubmit: () => {
…
}
}
}

export default connect(mapStateToProps, mapDispatchToProps)(Register)

测试 componet，这里用到 `enzyme` 和 `sinon`：

import React from ‘react’
import { bindActionCreators } from ‘redux’
import { Register } from ‘components/Register’
import { shallow } from ‘enzyme’
import {
FormGroup,
FormControl,
FormLabel,
FormError,
FormTip,
Dropdown,
Button,
TextInput
} from ‘componentPath/basic/form’

describe(‘rdappmsg/trade_edit/componets/Plan’, () => {
let _props, _spies, _wrapper
let register = {
username: ‘’,
usernameError: ‘’
}

beforeEach(() => {
_spies = {}
_props = {
register,
…bindActionCreators({
onChangeUsername: (_spies.onChangeUsername = sinon.spy()),
onSubmit: (_spies.onSubmit = sinon.spy())
}, _spies.dispatch = sinon.spy())
}
_wrapper = shallow(<Register {…_props} />)
})

it(‘Should render as a

.’, () => {
expect(_wrapper.is(‘div’)).to.equal(true)
})

it(‘Should has two children.’, () => {
expect(_wrapper.children()).to.have.length(2);
})

it(‘Each element of form should be .’, () => {
_wrapper.children().forEach(function (node) {
expect(node.is(FormGroup)).to.equal(true);
})
})

it(‘Should render username properly.’, () => {
expect(_wrapper.find(TextInput).prop(‘value’)).to.be.empty
_wrapper.setProps({register: {…register, username: ‘foobar’ }})
expect(_wrapper.find(TextInput).prop(‘value’)).to.equal(‘foobar’)
})

it(‘Should call onChangeUsername.’, () => {
_spies.onChangeUsername.should.have.not.been.called
_wrapper.find(TextInput).prop(‘onChange’)(‘hello’)
_spies.dispatch.should.have.been.called

})
})

`beforeEach`函数在每个测试用例启动前做一些初始化工作


`enzyme shallow` 的用法跟 jquery 的dom操作类似，可以通过选择器过滤出想要的节点，可以接受 css 选择器或者react class，如：`find('.someClass')`， `find(TextInput)`


这里用到了 `sinon` 的spies, 可以观察到函数的调用情况。他还提供stub, mock功能，了解更多请 google


### 四、action 的测试


先来看一个普通的 action：

/* actions/register.js */

import * as Validator from ‘helpers/validator’

export const CHANGE_USERNAME_ERROR = ‘CHANGE_USERNAME_ERROR’

export function checkUsername (name) {
return {
type: CHANGE_USERNAME_ERROR,
error: Validator.checkUsername(name)
}
}

普通的 action 就是一个简单的函数，返回一个 object，测试起来跟前面的简单函数例子一样:

/* tests/actions/register.js */

import * as Actions from ‘actions/register’

describe(‘actions/register’, () => {
describe(‘Action: checkUsername’, () => {
it(‘Should export a constant CHANGE_USERNAME_ERROR.’, () => {
expect(Actions.CHANGE_USERNAME_ERROR).to.equal(‘CHANGE_USERNAME_ERROR’)
})

it('Should be exported as a function.', () => {
  expect(Actions.checkUsername).to.be.a('function')
})

it('Should be return an action.', () => {
  const action = Actions.checkUsername('foobar')
  expect(action).to.have.property('type', Actions.CHANGE_USERNAME_ERROR)
})

it('Should be return an action with error while input empty name.', () => {
  const action = Actions.checkUsername('')
  expect(action).to.have.property('error').to.not.be.empty
})   

})

})

再来看一下异步 action, 这里功能是改变 username 的同时发起检查:

export const CHANGE_USERNAME = ‘CHANGE_USERNAME’

export function changeUsername (name) {
return (dispatch) => {
dispatch({
type: CHANGE_USERNAME,
name
})
dispatch(checkUsername(name))
}
}

测试代码：

/* tests/actions/register.js */

import * as Actions from ‘actions/register’

describe(‘actions/register’, () => {
let actions
let dispatchSpy
let getStateSpy

beforeEach(function() {
actions = []
dispatchSpy = sinon.spy(action => {
actions.push(action)
})
})

describe(‘Action: changeUsername’, () => {
it(‘Should export a constant CHANGE_USERNAME.’, () => {
expect(Actions.CHANGE_USERNAME).to.equal(‘CHANGE_USERNAME’)
})

it('Should be exported as a function.', () => {
  expect(Actions.changeUsername).to.be.a('function')
})

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

l-1715221950796)]
[外链图片转存中…(img-5HlN4Tlz-1715221950796)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取