使用react的情况下，一般也会用到redux，那么对于这种在react中使用redux的情况，写测试的时候就不能只用之前的文章里面介绍的方式写了。来看下组件例子import React, { Component, findDOMNode } from 'react'
import { connect } from 'react-redux'
import { increase, decrease, fetchItems } from '../../actions/counter'
class Home extends Component {
render() {
const {
item,
number,
isFetching,
increase,
decrease,
fetchItems
} = this.props;
return (
Some state changes:
{number}
Item Length : {item.length}
Request Item State:{!isFetching ? '已完成' : '获取中'}
increase(1)}>Increase
decrease(1)}>Decrease
fetchItems(item)}>FetchItems
)
}
componentDidMount() {
// const { item, fetchItems } = this.props;
// fetchItems(item)
}
componentDidUpdate() {
console.log('did update');
}
}
export default connect(
state => {
const { counter } = state;
return {
number: counter.number,
item: counter.item || [],
isFetching: counter.isFetching || false
}
}, {
increase,
decrease,
fetchItems
}
)(Home)这里涉及到了actions，那么代码如下：import {
INCREASE,
DECREASE,
REQUEST_DATA,
FETCH_DATA,
RECEIVE_DATA,
ERROR_DATA
} from '../constants';
import Utils from 'utils';
import $ from 'jquery';
const token = Utils.get_token();
require('babel-polyfill');
export function increase(n) {
return {
type: INCREASE,
amount: n
}
}
export function decrease(n) {
return {
type: DECREASE,
amount: n
}
}
export function fetchData(item) {
return dispatch => {
return new Promise((resolve, reject) => {
let sql = `SELECT * FROM qeeniao.user limit 0,10`;
$.ajax({
url: '/proxy/admin/query',
dataType: 'json',
type: 'post',
data: {
access_token: token,
sql: sql
},
beforeSend: () => {
resolve(dispatch(requestData(item)));
},
success: (data) => {
resolve(dispatch(receiveData(item, data)));
},
error: (error) => {
console.log(error.message);
reject(dispatch(errorData(item, error)));
}
})
});
}
}
function errorData(item, error) {
return {
type: ERROR_DATA,
item: item || [],
error: error
}
}
function requestData(item) {
return {
type: REQUEST_DATA,
item: item || []
}
}
function receiveData(item, data) {
return {
type: RECEIVE_DATA,
item: (item || []).concat(data),
data: data
}
}
export function fetchItems(item = []) {
return (dispatch, getState) => {
return dispatch(fetchData(item))
}
}这里又涉及到了contants，代码如下
export const INCREASE = 'INCREASE'
export const DECREASE = 'DECREASE'
export const FETCH_DATA = 'FETCH_DATA';
export const RECEIVE_DATA = 'RECEIVE_DATA';
export const REQUEST_DATA = 'REQUEST_DATA';
export const ERROR_DATA = 'ERROR_DATA';到这里基本上一个简单的例子就出来了。让我们写个测试吧。import React from 'react';
import expect from 'expect';
import { counter } from '../../app/js/reducers';
import TestUtils from 'react-addons-test-utils';
import Home from '../../app/js/components/test/Home';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
const reducer = combineReducers({
counter
})
const configureStore = (initialState) => {
const store = createStore(reducer, initialState);
return store;
}
describe('Home components', () => {
before('render and locate element ', function(){
const store = configureStore({});
const renderedComponent = TestUtils.renderIntoDocument(
);
const container = TestUtils.findRenderedDOMComponentWithClass(
renderedComponent,
'container'
);
const row = TestUtils.findRenderedDOMComponentWithClass(
renderedComponent,
'row'
);
const btnGroup = TestUtils.findRenderedDOMComponentWithClass(
renderedComponent,
'btn-group'
)
this.container = container;
this.row = row;
this.btnGroup = btnGroup;
});
it('container should exist', function(){
expect(this.container).toExist();
});
it('container class name should be container', function(){
expect(this.container.getAttribute('class')).toBe('container');
});
it('row should exist', function() {
expect(this.row).toExist();
});
it('row class name should be row', function() {
expect(this.row.getAttribute('class')).toBe('row');
});
it('btnGroup should exist', function(){
expect(this.btnGroup).toExist();
})
it('btnGroup class name should be btn-group', function() {
expect(this.btnGroup.getAttribute('class')).toBe('btn-group');
});
})我去，又牵扯到了reducers了，代码如下：这里说下，我是把reducer做了一个目录的方式来调用。reducers--couner.js--index.jsindex.js的代码如下：import counter from './counter'
export {
counter
} ;counter.js的代码如下：import {
INCREASE,
DECREASE,
REQUEST_DATA,
FETCH_DATA,
RECEIVE_DATA,
ERROR_DATA
} from '../constants';
const initialState = {
number: 1
}
export default function counter(state = initialState, action) {
switch (action.type) {
case INCREASE:
return {
number: state.number + action.amount,
item: state.item || []
}
break;
case DECREASE:
return {
number: state.number - action.amount,
item: state.item || []
}
break;
case REQUEST_DATA:
return {
number: state.number,
isFetching: true,
item: action.item || []
}
break;
case FETCH_DATA:
return {
number: state.number,
isFetching: true,
item: action.item || []
}
break;
case ERROR_DATA:
return {
number: state.number,
isFetching: false,
item: action.item || [],
error: action.error
}
break;
case RECEIVE_DATA:
return {
number: state.number,
isFetching: false,
item: action.item || [],
data: action.data
}
break;
default:
return state;
}
}好了，到这里，相关的一些配置可以在浏览下这篇文章：React 0.14 mocha组建单元测试（一）。