ReactJS on Dapeng Zhang

如何直接使用Reactjs

Thu, 10 Jul 2025 10:58:10 +0000

这里说的直接使用Reactjs，指的是不使用任何打包工具，直接在代码中引入，这种方式类似于在html页面中直接引入javascript脚本文件，不过现在的前端开发基本也不建议使用类似的这种方式，而是喜欢建改代码工程化，包括一些打包发布之类的。比如使用webpack等类似的打包工具，可以包括压缩、分包各种优化放在里面。直接引入的方式就是我们自己写的代码，直接上线使用了，不包括什么压缩、分包之类的，所以我也不推荐直接引入的方式，除非引入的是打包好的，并进行了优化的，方便前端进行加载。

Reactjs安装

<script src="/static/js/@babel/[email protected]/babel.min.js"></script>
<script src="/static/js/[email protected]/umd/react.production.min.js" crossorigin></script>
<script src="/static/js/[email protected]/umd/react-dom.production.min.js" crossorigin></script>

这里使用了babel是为了对jsx语法进行转义，将react语法转义为es5通用语法。同时也可以将一些es6语法进行部分转义，为什么说是部分，因为在遇到async/await的时候，并没有进行转义，这个问题有待解决。我试过绑定plugins的方式，但是结果都不是很理想。

Fetch Api安装

<script src="/static/js/3.0.0/fetch.umd.js" crossorigin></script>

这里添加这个fetch的api，主要是为了替换类似jquery值之类的ajax，当然你也可以使用。不过需要谨慎“异步”的逻辑

添加jsx代码

<script type="text/babel">

// store
const Store = React.createContext();

function StoreProvider(props) {
 const [state, dispatch] = React.useReducer(reducer, initialState);
 const value = { state, dispatch };
 return <Store.Provider value={value}>{props.children}</Store.Provider>
}

// reducer
const initialState = {
 renderData: {!! json_encode($renderData) !!}, // server端直接进渲染的变量
};

function reducer (state, action) {
 switch(action.type) {
 case 'FETCH_DATA':
 return { ...state, films: action.payload };
 default:
 return state;
 }
}

// view
function MainContainer () {
 const {state, dispatch} = React.useContext(Store);

 const checkPoint = (data) => {
 return fetch('/xxx/xxx/xxx', {
 body: JSON.stringify(data),
 headers: {
 'Content-Type': 'application/json',
 },
 credentials: "same-origin",
 method: 'POST',
 });
 }

 const exchangeHandle = (id) => {
 checkPoint({id:id}).then(data => {
 data.json().then(o => {
 console.log(o);

 if (!o.success) {
 throw new Error(o.message);
 }

 window.location.href = '/xxx/xxx/xxx/'+id;
 }).catch(e => {
 console.log(e);
 toast({
 'message': e.message
 });
 });
 }).catch(e => {
 console.log(e);
 toast({
 'message': '网络异常'
 });
 });
 }

 const pointHandle = () => {
 window.location.href = '/xxx/xxx/xxx';
 }

 const ruleLinkHandle = () => {
 window.location.href = state.renderData.ruleLink;
 }

 React.useEffect(() => {
 // 页面加载后的逻辑

 });

 console.log(state);

 let levelComponent = (<span></span>);
 if (state.renderData.level == 1) {
 levelComponent = (<img src='/images/xxx/xxx/lv1.png' className='level-logo' />);
 } else if (state.renderData.level == 2) {
 levelComponent = (<img src='/images/xxx/xxx/lv2.png' className='level-logo' />);
 }

 return (
 <React.Fragment>
 <div className='main-container'>
 <div className="bg-container">
 <img src="/images/xxx/xxx/bg.png" className="bg-img"/>
 </div>
 <div className="content-1-container">
 <span className="level-container">
 {levelComponent}
 </span>
 <span className="point-container" onClick={ruleLinkHandle}>等级与积分说明<img src='/images/xxx/xxx/help_icon.png' className='rule-img' /></span>
 </div>
 <div className="content-2-container">
 <span className="point-2-container">{state.renderData.point}</span>
 </div>
 <div className="content-3-container">
 <span className="point-3-container" onClick={pointHandle}>我的积分 <img src='/images/xxx/xxx/point-arrow.png' /></span>
 </div>
 <div className="line-container"></div>
 <div className="goods-container">
 <div className="goods-title">积分商城</div>
 <div className="goods-item">
 {
 state.renderData.goods_item.map((v, k) => {
 return (
 <div className="goods-row" key={v.goods_id}>
 <div className="goods-content-container">
 <div className="img"><img src={v.icon} className='img-1' /></div>
 <div className="title">{v.name}</div>
 <div className="price">
 <span>{v.point}积分</span><span className="money">￥{v.original_price}</span>
 </div>
 <div className="btn">
 <span className="btn-ele" onClick={() => exchangeHandle(v.goods_id)}>立即兑换</span>
 </div>
 </div>
 </div>
 );
 })
 }
 </div>
 </div>
 </div>
 </React.Fragment>
 )
}

const domContainer = document.querySelector('#root');

ReactDOM.render(
 <StoreProvider>
 <MainContainer />
 </StoreProvider>,
 domContainer
);
</script>

演示的代码稍微有点多，不过确实是使用了本人在开发的项目中的代码，并没有做太多删减，当然这里也只是做了一个例子，这个代码并不能直接copy后直接使用的。

另外，你也许会觉得这个代码放到一个文件中会比较好，是的，那么在说下引入的方式，比如我在实际项目中使用了tost，那我自己就写了一个toast，但是这个toast是在所有页面展示的时候都能统一样式，所以需要抽出来放到一个文件，然后可以在任意页面调用，于是这个文件可以这样引用，

<script type="text/babel" src="/js/xxx/xxx/toast.jsx"></script>

这个文件的代码大致如下

// store
const Store = React.createContext();

function StoreProvider(props) {
 const [state, dispatch] = React.useReducer(reducer, initialState);
 const value = { state, dispatch };
 return <Store.Provider value={value}>{props.children}</Store.Provider>
}

// reducer
const initialState = {
 show: true
};

function reducer (state, action) {
 switch(action.type) {
 case 'FETCH_DATA':
 return { ...state, films: action.payload };
 default:
 return state;
 }
}

function Toast(props) {
 return (
 <React.Fragment>
 <div className='toast-container'>
 <div className='toast-text'>
 <img src="/images/xxx/xxx/emijo_icon_1.png" />
 <p>{props.message}</p>
 </div>
 </div>
 </React.Fragment>
 );
}

const toastContainer = [];

function toast(properties) {
 const { ...props } = properties || {};

 const divEle = document.createElement('div');

 if (toastContainer.length > 0) {
 return false;
 }
 const t = setTimeout(() => {
 document.body.removeChild(divEle);

 clearTimeout(t);
 toastContainer.pop();
 }, props.timeout || 2000);

 document.body.appendChild(divEle);
 toastContainer.push(1);

 ReactDOM.render(<StoreProvider><Toast {...props} /></StoreProvider>, divEle);
}

在其他页面中可以直接调用方法toast({message: '我是一个提示'})。

之所以记录这个Reactjs如何在不安装打包工具的情况下直接使用，是因为安装一个打包工具在取做配置然后在开发还是蛮麻烦的，但是要开发的功能其实并没有多么复杂。可以临时这样用一下。实际上在使用的过程中，如果遇到太复杂的功能建议不这样用，因为babel将jsx语法进行转义的时候，是要花费时间的。

React 16 Jest ES6级模拟 - 与MongoDB一起使用

Tue, 08 Jul 2025 15:15:50 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.32
npm install

与MongoDB一起使用(Using with MongoDB)

通过 Global Setup/Teardown和Async Test EnvironmentAPI，Jest可以与MongoDB一起顺利运行。

jest-mongodb实例
基本思路是：

.旋转内存中的mongodb服务器 jest.mongodb.setup.js
.使用mongo URI导出全局变量 jest.mongodb.environment.js
.使用真实数据库编写查询/聚合测试✨
.使用Global Teardown关闭mongodb服务器 jest.mongodb.teardown.js

这是GlobalSetup脚本的一个示例
在项目根目录添加如下几个文件

jest.mongodb.setup.js

const path = require('path');
const fs = require('fs');
const MongodbMemoryServer = require('mongodb-memory-server');

const globalConfigPath = path.join(__dirname, 'globalConfig.json');
const mongoServer = new MongodbMemoryServer.MongoMemoryServer();

module.exports = async function setupMongodb() {
 console.log('配置Jest Setup调用');
 const mongoConfig = {
 mongoDBName: 'jest',
 mongoUri: await mongoServer.getConnectionString(),
 };

 // 将配置写入本地配置文件以供所有测试都能调用的到
 fs.writeFileSync(globalConfigPath, JSON.stringify(mongoConfig));

 // 设置对mongodb的引用，以便在拆卸期间关闭服务器。
 global.__MONGOD__ = mongoServer;
};

jest.mongodb.environment.js

const NodeEnvironment = require('jest-environment-node');
const path = require('path');
const fs = require('fs');

const globalConfigPath = path.join(__dirname, 'globalConfig.json');

class MongoEnvironment extends NodeEnvironment {
 constructor(config) {
 super(config);
 }

 async setup() {
 console.log('设置MongoDB测试环境');

 const globalConfig = JSON.parse(fs.readFileSync(globalConfigPath, 'utf-8'));

 this.global.__MONGO_URI__ = globalConfig.mongoUri;
 this.global.__MONGO_DB_NAME__ = globalConfig.mongoDBName;

 await super.setup();
 }

 async teardown() {
 console.log('卸载MongoDB测试环境');

 await super.teardown();
 }

 runScript(script) {
 return super.runScript(script);
 }
}

module.exports = MongoEnvironment;

jest.mongodb.teardown.js

module.exports = async function tearDownMongodb() {
 console.log('配置Jest TearDown调用');
 await global.__MONGOD__.stop();
};

执行测试用例之前需要安装以下依赖库（如果还没有安装的情况下）

npm install mongodb-memory-server --save-dev
npm install mongodb --save-dev
npm install jest-environment-node --save-dev

修改jest.config.js文件，添加下面的代码

globalSetup: './jest.mongodb.setup.js',
globalTeardown: './jest.mongodb.teardown.js',
testEnvironment: './jest.mongodb.environment.js',

jest.config.js

module.exports = {
 setupFiles: ['./jest.setup.js'],
 snapshotSerializers: ['enzyme-to-json/serializer'],
 globalSetup: './jest.mongodb.setup.js',
 globalTeardown: './jest.mongodb.teardown.js',
 testEnvironment: './jest.mongodb.environment.js',
};

下面看测试用例代码
src/__tests__/jest_mongodb.test.js

const {
 MongoClient,
} = require('mongodb');

let connection;
let db;

beforeAll(async () => {
 connection = await MongoClient.connect(global.__MONGO_URI__, {
 useNewUrlParser: true,
 });
 db = await connection.db(global.__MONGO_DB_NAME__);
});

afterAll(async () => {
 await connection.close();
});

it('从集合中汇总文档', async () => {
 const files = db.collection('files');

 await files.insertMany([{
 type: 'Document',
 },
 {
 type: 'Video',
 },
 {
 type: 'Image',
 },
 {
 type: 'Document',
 },
 {
 type: 'Image',
 },
 {
 type: 'Document',
 },
 ]);

 const topFiles = await files
 .aggregate([{
 $group: {
 _id: '$type',
 count: {
 $sum: 1,
 },
 },
 },
 {
 $sort: {
 count: -1,
 },
 },
 ])
 .toArray();

 expect(topFiles).toEqual([{
 _id: 'Document',
 count: 3,
 },
 {
 _id: 'Image',
 count: 2,
 },
 {
 _id: 'Video',
 count: 1,
 },
 ]);
});

实践项目地址

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
git checkout v_1.0.33

React 16 Jest ES6级模拟 - 监视并监视模拟情况

Tue, 08 Jul 2025 15:15:45 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.32
npm install

ES6 Class Mocks(使用ES6语法类的模拟)

Jest可用于模拟导入到要测试的文件中的ES6语法的类。

ES6语法的类是具有一些语法糖的构造函数。因此，ES6语法的类的任何模拟都必须是函数或实际的ES6语法的类(这也是另一个函数)。
所以可以使用模拟函数来模拟它们。如下

跟踪使用情况（监视模拟）(Keeping track of usage (spying on the mock))

注入测试实现很有帮助，但我们可能还想测试是否使用正确的参数调用类构造函数和方法。

监视构造函数(Spying on the constructor)

为了跟踪对构造函数的调用，用一个Jest模拟函数替换HOF返回的函数。
使用jest.fn()创建它，然后使用mockImplementation()指定它的实现。如下

import SoundPlayer from '../lib/sound-player';
jest.mock('../lib/sound-player', () => {
 // 检查构造函数的调用
 return jest.fn().mockImplementation(() => {
 return {
 choicePlaySoundFile: () => {},
 playSoundFile: () => {},
 };
 });
});

我们使用SoundPlayer.mock.calls来检查我们的模拟类的用法：expect(SoundPlayer).toHaveBeenCalled();
或接近等价的：expect(SoundPlayer.mock.calls.length).toEqual(1);

监视类的方法(Spying on methods of our class)

我们的模拟类需要提供将在测试期间调用的任何成员函数(示例中为playSoundFile)，否则我们将因调用不存在的函数而出错。
但是我们可能也希望监视对这些方法的调用，以确保使用预期的参数调用它们。

每次在测试期间调用模拟构造函数时，都会创建一个新对象。
为了监视所有这些对象中的方法调用，我们使用另一个mock函数填充playSoundFile，并在我们的测试文件中存储对同一个mock函数的引用，因此它在测试期间可用。

import SoundPlayer from '../lib/sound-player';
const mockPlaySoundFile = jest.fn();
const mockChoicePlaySoundFile = jest.fn();
jest.mock('../lib/sound-player', () => {
 return jest.fn().mockImplementation(() => {
 return {
 choicePlaySoundFile: mockChoicePlaySoundFile,
 playSoundFile: mockPlaySoundFile,
 };
 });
});

手动模拟等效于此：

export const mockChoicePlaySoundFile = jest.fn();
const mockPlaySoundFile = jest.fn();

const mock = jest.fn().mockImplementation(() => {
 const data = {
 choicePlaySoundFile: mockChoicePlaySoundFile,
 playSoundFile: mockPlaySoundFile,
 };

 return data;
});

export default mock;

用法类似于模块工厂函数，除了可以省略jest.mock()中的第二个参数，并且必须将模拟方法导入到测试文件中，因为它不再在那里定义。
使用原始模块路径;
不包括__mocks__

在测试之间进行清理(Cleaning up between tests)

要清除对mock构造函数及其方法的调用记录，我们在beforeEach()函数中调用mockClear()：

前面的文章分别做了4个实例,分别是下面四个文件,可以自己打开项目去具体看下，这里就不在展示了

src/__tests/jest_sound_player.test.js
src/__tests/jest_sound_player_2.test.js
src/__tests/jest_sound_player_3.test.js
src/__tests/jest_sound_player_4.test.js

实践项目地址

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
git checkout v_1.0.32

React 16 Jest ES6级模拟 - 深入：了解模拟构造函数

Tue, 08 Jul 2025 15:15:40 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.32
npm install

ES6 Class Mocks(使用ES6语法类的模拟)

Jest可用于模拟导入到要测试的文件中的ES6语法的类。

深入：了解模拟构造函数

使用jest.fn().mockImplementation()构建的构造函数mock，使模拟看起来比实际更复杂。
那么jest是如何创建一个简单的模拟(simple mocks)并演示下mocking是如何起作用的

手动模拟另一个ES6语法的类

如果使用与__mocks__文件夹中的模拟类相同的文件名定义ES6语法的类，则它将用作模拟。
这个类将用于代替真正的类。
我们可以为这个类注入测试实现，但不提供监视调用的方法。如下
src/__mocks__/sound-player.js

export default class SoundPlayer {
 constructor() {
 console.log('Mock SoundPlayer: constructor was called');
 this.name = 'Player1';
 this.fileName = '';
 }

 choicePlaySoundFile(fileName) {
 console.log('Mock SoundPlayer: choicePlaySoundFile was called');
 this.fileName = fileName;
 }

 playSoundFile() {
 console.log('Mock SoundPlayer: playSoundFile was called');
 console.log('播放的文件是:', this.fileName);
 }
}

使用模块工厂参数的简单模拟(Simple mock using module factory parameter)

传递给jest.mock(path，moduleFactory)的模块工厂函数可以是返回函数*的高阶函数（HOF）。
这将允许在模拟上调用new。
同样，这允许为测试注入不同的行为，但不提供监视调用的方法

模块工厂功能必须返回一个功能( Module factory function must return a function)

为了模拟构造函数，模块工厂必须返回构造函数。
换句话说，模块工厂必须是返回函数的函数 - 高阶函数（HOF）。如下演示

jest.mock('../lib/sound-player', () => {
 return function() {
 return {
 playSoundFile: () => {}
 };
 };
});

注意：箭头功能不起作用(Note: Arrow functions won’t work)

请注意，mock不能是箭头函数，因为在JavaScript中不允许在箭头函数上调用new。
所以这不起作用：

jest.mock('./sound-player', () => {
 return () => {
 // 不起作用 箭头函数不会被调用
 return {playSoundFile: () => {}};
 };
});

这将抛出TypeError：_soundPlayer2.default不是构造函数，除非代码被转换为ES5，例如，
通过babel-preset-env。（ES5没有箭头函数也没有类，因此两者都将被转换为普通函数。）

实践项目地址

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
git checkout v_1.0.32

React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三、四

Tue, 08 Jul 2025 15:15:34 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.31
npm install

ES6 Class Mocks(使用ES6语法类的模拟)

Jest可用于模拟导入到要测试的文件中的ES6语法的类。

ES6语法类的实例

这里的实例我使用官方的例子，SoundPlayer类和SoundPlayerConsumer消费者类。下面部分文件的内容参考上篇文章React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟)src/lib/sound-player.js

export default class SoundPlayer {
 constructor() {
 this.name = 'Player1';
 this.fileName = '';
 }

 choicePlaySoundFile(fileName) {
 this.fileName = fileName;
 }

 playSoundFile() {
 console.log('播放的文件是:', this.fileName);
 }
}

src/lib/sound-player-consumer.js

import SoundPlayer from './sound-player';

export default class SoundPlayerConsumer {
 constructor() {
 this.soundPlayer = new SoundPlayer();
 }

 play() {
 const coolSoundFileName = 'song.mp3';
 this.soundPlayer.choicePlaySoundFile(coolSoundFileName);
 this.soundPlayer.playSoundFile();
 }
}

ES6语法的类测试实例三 - 使用模块工厂参数调用jest.mock()(Calling jest.mock() with the module factory parameter)jest.mock(path，moduleFactory)接受模块工厂参数。

模块工厂是一个返回模拟的函数。
为了模拟构造函数，模块工厂必须返回构造函数。
换句话说，模块工厂必须是返回函数的函数 - 高阶函数（HOF）。测试用例如下
src/__tests__/jest_sound_player_3.test.js

import SoundPlayer from '../lib/sound-player';
import SoundPlayerConsumer from '../lib/sound-player-consumer';

jest.mock('../lib/sound-player'); // SoundPlayer 现在是一个模拟构造函数

const mockPlaySoundFile = jest.fn();
const mockChoicePlaySoundFile = jest.fn();

jest.mock('../lib/sound-player', () => jest.fn().mockImplementation(() => ({
 choicePlaySoundFile: mockChoicePlaySoundFile,
 playSoundFile: mockPlaySoundFile,
})));

beforeEach(() => {
 // 清除所有实例并调用构造函数和所有方法：
 SoundPlayer.mockClear();
 mockChoicePlaySoundFile.mockClear();
});

it('我们可以检查SoundPlayerConsumer是否调用了类构造函数', () => {
 const soundPlayerConsumer = new SoundPlayerConsumer();
 expect(SoundPlayer).toHaveBeenCalledTimes(1);
});

it('我们可以检查SoundPlayerConsumer是否在类实例上调用了一个方法', () => {
 const soundPlayerConsumer = new SoundPlayerConsumer();
 const coolSoundFileName = 'song.mp3';
 soundPlayerConsumer.play();
 expect(mockChoicePlaySoundFile).toHaveBeenCalledWith(coolSoundFileName);
});

注意上面代码中的这段代码

const mockPlaySoundFile = jest.fn();
const mockChoicePlaySoundFile = jest.fn();

jest.mock('../lib/sound-player', () => jest.fn().mockImplementation(() => ({
 choicePlaySoundFile: mockChoicePlaySoundFile,
 playSoundFile: mockPlaySoundFile,
})));

工厂参数的限制是，由于对jest.mock()的调用被提升到文件的顶部，因此无法首先定义变量然后在工厂中使用它。
对以"mock"开头的变量进行例外处理。

ES6语法的类测试实例四 - 使用mockImplementation（）或mockImplementationOnce（）替换mock(Replacing the mock using mockImplementation() or mockImplementationOnce())

您可以通过在现有模拟上调用mockImplementation()来替换前面所有的模拟，以便更改单个测试或所有测试的实现。对jest.mock的调用被提升到代码的顶部。也可以指定模拟，例如在beforeAll()中，通过在现有mock上调用mockImplementation()或mockImplementationOnce()而不是使用factory参数。如果需要，这还允许在测试之间更改模拟：测试用例如下

import SoundPlayer from '../lib/sound-player';
import SoundPlayerConsumer from '../lib/sound-player-consumer';

jest.mock('../lib/sound-player'); // SoundPlayer 现在是一个模拟构造函数

describe('SoundPlayer被调用的时候抛出异常', () => {
 beforeAll(() => {
 SoundPlayer.mockImplementation(() => ({
 playSoundFile: () => {
 throw new Error('Test error');
 },
 choicePlaySoundFile: () => {
 throw new Error('Test error');
 },
 }));
 });

 it('play被调用的收抛出异常', () => {
 const soundPlayerConsumer = new SoundPlayerConsumer();
 expect(() => soundPlayerConsumer.play()).toThrow();
 });
});

上面的代码注意这里

beforeAll(() => {
 SoundPlayer.mockImplementation(() => ({
 playSoundFile: () => {
 throw new Error('Test error');
 },
 choicePlaySoundFile: () => {
 throw new Error('Test error');
 },
 }));
});

实践项目地址

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
git checkout v_1.0.32

React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例二

Mon, 07 Jul 2025 16:42:36 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.30
npm install

ES6 Class Mocks(使用ES6语法类的模拟)

Jest可用于模拟导入到要测试的文件中的ES6语法的类。

ES6语法的类测试实例二，今天使用第二种方式 - 手动模拟(Manual mock)

ES6语法类的实例

export default class SoundPlayer {
 constructor() {
 this.name = 'Player1';
 this.fileName = '';
 }

 choicePlaySoundFile(fileName) {
 this.fileName = fileName;
 }

 playSoundFile() {
 console.log('播放的文件是:', this.fileName);
 }
}

src/lib/sound-player-consumer.js

import SoundPlayer from './sound-player';

export default class SoundPlayerConsumer {
 constructor() {
 this.soundPlayer = new SoundPlayer();
 }

 play() {
 const coolSoundFileName = 'song.mp3';
 this.soundPlayer.choicePlaySoundFile(coolSoundFileName);
 this.soundPlayer.playSoundFile();
 }
}

通过在__mocks__文件夹中创建一个模拟实现来创建手动模拟。
这个可以指定实现，并且可以通过测试文件使用它。如下
src/lib/mocks/sound-player.js

export const mockChoicePlaySoundFile = jest.fn();
const mockPlaySoundFile = jest.fn();

const mock = jest.fn().mockImplementation(() => {
 const data = {
 choicePlaySoundFile: mockChoicePlaySoundFile,
 playSoundFile: mockPlaySoundFile,
 };

 return data;
});

export default mock;

然后在测试用例中导入mock和mock方法，具体如下

import SoundPlayer, { mockChoicePlaySoundFile } from '../lib/sound-player';
import SoundPlayerConsumer from '../lib/sound-player-consumer';

jest.mock('../lib/sound-player'); // SoundPlayer 现在是一个模拟构造函数

beforeEach(() => {
 // 清除所有实例并调用构造函数和所有方法：
 SoundPlayer.mockClear();
 mockChoicePlaySoundFile.mockClear();
});

it('我们可以检查SoundPlayerConsumer是否调用了类构造函数', () => {
 const soundPlayerConsumer = new SoundPlayerConsumer();
 expect(SoundPlayer).toHaveBeenCalledTimes(1);
});

it('我们可以检查SoundPlayerConsumer是否在类实例上调用了一个方法', () => {
 const soundPlayerConsumer = new SoundPlayerConsumer();
 const coolSoundFileName = 'song.mp3';
 soundPlayerConsumer.play();
 expect(mockChoicePlaySoundFile).toHaveBeenCalledWith(coolSoundFileName);
});

运行后得到的结果如下

 PASS src/__tests__/jest_sound_player_2.test.js
 ✓ 我们可以检查SoundPlayerConsumer是否调用了类构造函数 (7ms)
 ✓ 我们可以检查SoundPlayerConsumer是否在类实例上调用了一个方法 (2ms)

Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 3.352s
Ran all test suites matching /src\/__tests__\/jest_sound_player_2.test.js/i.

下次介绍第三、四种方法 - 使用模块工厂参数调用jest.mock()(Calling jest.mock() with the module factory parameter)和使用mockImplementation()或mockImplementationOnce()替换mock(Replacing the mock using mockImplementation() or mockImplementationOnce())

实践项目地址

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
git checkout v_1.0.31

React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例一

Mon, 07 Jul 2025 16:42:26 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.29
npm install

ES6 Class Mocks(使用ES6语法类的模拟)

Jest可用于模拟导入到要测试的文件中的ES6语法的类。

一个ES6语法类的实例

这里的实例我使用官方的例子，SoundPlayer类和SoundPlayerConsumer消费者类。

src/lib/sound-player.js

export default class SoundPlayer {
 constructor() {
 this.name = 'Player1';
 this.fileName = '';
 }

 choicePlaySoundFile(fileName) {
 this.fileName = fileName;
 }

 playSoundFile() {
 console.log('播放的文件是:', this.fileName);
 }
}

src/lib/sound-player-consumer.js

import SoundPlayer from './sound-player';

export default class SoundPlayerConsumer {
 constructor() {
 this.soundPlayer = new SoundPlayer();
 }

 play() {
 const coolSoundFileName = 'song.mp3';
 this.soundPlayer.choicePlaySoundFile(coolSoundFileName);
 this.soundPlayer.playSoundFile();
 }
}

这个测试官方介绍了四种方式来创建一个ES6语法的类测试，今天先使用第一种方式 - 自动模拟(Automatic mock)

调用jest.mock('../lib/sound-player')会返回一个有用的“自动模拟”，可以使用它来监视对类构造函数及其所有方法的调用。
它用模拟构造函数替换ES6语法的类，并使用总是返回undefined的mock函数替换它的所有方法。
方法调用保存在AutomaticMock.mock.instances [index] .methodName.mock.calls中。
请注意，如果在类中使用箭头功能，它们将不会成为模拟的一部分。
原因是箭头函数不存在于对象的原型上，它们只是包含对函数的引用的属性。
如果不需要替换类的实现，这是最简单的设置选项。测试用例如下：

import SoundPlayer from '../lib/sound-player';
import SoundPlayerConsumer from '../lib/sound-player-consumer';

jest.mock('../lib/sound-player'); // SoundPlayer 现在是一个模拟构造函数

beforeEach(() => {
 // 清除所有实例并调用构造函数和所有方法：
 SoundPlayer.mockClear();
});

it('我们可以检查SoundPlayerConsumer是否调用了类构造函数', () => {
 const soundPlayerConsumer = new SoundPlayerConsumer();
 expect(SoundPlayer).toHaveBeenCalledTimes(1);
});

it('我们可以检查SoundPlayerConsumer是否在类实例上调用了一个方法', () => {
 // 检查 mockClear() 会否起作用:
 expect(SoundPlayer).not.toHaveBeenCalled();

 const soundPlayerConsumer = new SoundPlayerConsumer();
 // 类构造函数再次被调用
 expect(SoundPlayer).toHaveBeenCalledTimes(1);

 const coolSoundFileName = 'song.mp3';
 soundPlayerConsumer.play();

 // mock.instances可用于自动模拟
 const mockSoundPlayerInstance = SoundPlayer.mock.instances[0];
 const mockChoicePlaySoundFile = mockSoundPlayerInstance.choicePlaySoundFile;
 expect(mockChoicePlaySoundFile.mock.calls[0][0]).toEqual(coolSoundFileName);
 // 相当于上面的检查
 expect(mockChoicePlaySoundFile).toHaveBeenCalledWith(coolSoundFileName);
 expect(mockChoicePlaySoundFile).toHaveBeenCalledTimes(1);
});

运行会得到类似如下输出

 PASS src/__tests__/jest_sound_player.test.js
 ✓ 我们可以检查SoundPlayerConsumer是否调用了类构造函数 (4ms)
 ✓ 我们可以检查SoundPlayerConsumer是否在类实例上调用了一个方法 (3ms)

Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 2.27s
Ran all test suites matching /src\/__tests__\/jest_sound_player.test.js/i.

下次介绍第二种方法 - 手动模拟(Manual mock)

实践项目地址

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
git checkout v_1.0.30

React 16 Jest使用ES模块导入和模拟JSDOM中未实现的方法

Mon, 07 Jul 2025 16:42:23 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.28
npm install

Using with ES module imports(使用ES模块导入)

我们在使用ES模块时做导入的时候，会习惯性的将导入的语句放在测试文件的顶部。但是在使用Jest的时候，需要指示Jest在模块使用之前进行模拟操作。
正是由于这个原因，Jest会自动将jest.mock的调用提升到模块的顶部(在任何导入之前)

Mocking methods which are not implemented in JSDOM(模拟JSDOM中未实现的方法)

如果某些代码在使用JSDOM(Jest使用的DOM实现)尚未实现的方法的时候，这个情况在测试时是比较麻烦的。比如我们调用window.matchMedia()的时候，Jest返回TypeError：window.matchMedia不是函数，并且没有正确执行测试。
在这种情况下，在测试文件中模拟matchMedia就可以解决类似的问题：如下

window.matchMedia = jest.fn().mockImplementation(query => {
 return {
 matches: false,
 media: query,
 onchange: null,
 addListener: jest.fn(),
 removeListener: jest.fn(),
 };
});

如果window.matchMedia()用于在测试中调用的函数(或方法)，则此方法有效。
如果window.matchMedia()直接在测试文件中执行，则Jest报告相同的错误。
在这种情况下，解决方案是将手动模拟移动到单独的文件中，并在测试文件之前将其包含在测试中：实例如下

import './matchMedia.mock'; // Must be imported before the tested file
import { myMethod } from './file-to-test';

describe('myMethod()', () => {
 // Test the method here...
});

这里官方就是简单的介绍了下，导致有些学者可能还是云里雾里的，下面简单的写个实例
创建文件
src/lib/matchMedia.mock.js

window.matchMedia = jest.fn().mockImplementation((query) => {
 const obj = {
 matches: false,
 media: query,
 onchange: null,
 addListener: jest.fn(),
 removeListener: jest.fn(),
 };

 return obj;
});

src/lib/useMatchMedia.js

const useMatchMedia = () => {
 const res = window.matchMedia;
 return res;
};

module.exports = {
 useMatchMedia,
};

创建完文件后，添加测试文件
src/__tests__/useMatchMedia.test.js
第一次我们不调用src/lib/matchMedia.mock.js这个文件

// import '../lib/matchMedia.mock';
import { useMatchMedia } from '../lib/useMatchMedia';

describe('useMatchMedia()', () => {
 it('useMatchMedia() 被调用', () => {
 const res = useMatchMedia();
 expect(res).toBeUndefined();
 // expect(res).toBeDefined();
 });
});

第二次我们调用src/lib/matchMedia.mock.js这个文件

import '../lib/matchMedia.mock';
import { useMatchMedia } from '../lib/useMatchMedia';

describe('useMatchMedia()', () => {
 it('useMatchMedia() 被调用', () => {
 const res = useMatchMedia();
 expect(res).toBeDefined();
 });
});

从上面的例子大概就能理解基本上官方的意思了，具体如何使用，这个可以自己有发挥。

如果国内的用户还是不知道如何流畅的运行jest的话建议翻翻我前面的文章。
项目实践地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.29

React 16 Jest手动模拟(Manual Mocks)

Mon, 07 Jul 2025 16:42:19 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.27
npm install

手动模拟(Manual Mocks)

手动模拟主要功能是用于存储模拟的数据。

例如，我可能希望创建一个允许您使用虚假数据的手动模拟，而不是访问网站或数据库等远程资源。

这可以确保您的测试快速且不易碎(not flaky)。

模拟水果模块(Mocking fruit modules)

通过在紧邻模块的__mocks__/子目录中编写模块来定义手动模拟。这个方式我在前面文章中的实例中也有用到过，具体的可以参考之前的文章，这里我说下大概的流程

例如，要在src/lib目录中模拟一个名为fruit的模块，则分别创建文件src/lib/fruit.js和文件src/lib/__mocks__/fruit.js的文件。

请注意__mocks__文件夹区分大小写。如果命名目录是__MOCKS__，则可能在某些系统上测试的时候会中断。

注意点

当我们在测试中需要该模块时，还需要显式的调用jest.mock(’./moduleName’)。

模拟Node核心模块(Mocking Node modules)

如果正在模拟的模块是Node module(例如：lodash)，则模拟应放在与node_modules相邻的__mocks__目录中(除非您将根配置为指向项目根目录以外的文件夹)并将自动模拟。

没有必要显式调用jest.mock(‘module_name’)。

可以通过在与范围模块的名称匹配的目录结构中创建文件来模拟范围模块。

例如，要模拟名为@scope/project-name的作用域模块，请在__mocks__/@scope/project-name.js创建一个文件，相应地创建@scope/目录。

注意点

如果我们想模拟Node的核心模块（例如：fs或path），那么明确地调用。

例如：jest.mock(‘path’)是必需的，因为默认情况下不会模拟核心Node模块。

实例演示

当给定模块存在手动模拟时，Jest的模块系统将在显式调用jest.mock(‘moduleName’)时使用该模块。

但是，当automock设置为true时，即使未调用jest.mock(‘moduleName’)，也将使用手动模拟实现而不是自动创建的模拟。

要选择不使用此行为，您需要在应使用实际模块实现的测试中显式调用jest.unmock(‘moduleName’)。

注意点

为了正确模拟，Jest需要jest.mock(‘moduleName’)与require/import语句在同一范围内。

假设我们有一个模块，它提供给定目录中所有文件的摘要。在这种情况下，我们使用核心(内置)fs模块来演示

src/lib/FileSummarizer.js

const fs = require('fs');

function summarizeFilesInDirectorySync(directory) {
 return fs.readdirSync(directory).map(fileName => ({
 directory,
 fileName,
 }));
}

exports.summarizeFilesInDirectorySync = summarizeFilesInDirectorySync;

由于我们希望我们的测试避免实际操作磁盘(这非常慢且易碎[fragile])，我们通过扩展自动模拟为fs模块创建手动模拟。

我们的手动模拟将实现我们可以为我们的测试构建的fs API的自定义版本：

src/lib/__mocks__/fs.js

const path = require('path');

const fs = jest.genMockFromModule('fs');

let mockFiles = Object.create(null);

function __setMockFiles(newMockFiles) {
 mockFiles = Object.create(null);

 const keys = Object.keys(newMockFiles);

 for (let index = 0; index < keys.length; index += 1) {
 const file = keys[index];
 const dir = path.dirname(file);
 if (!mockFiles[dir]) {
 mockFiles[dir] = [];
 }
 mockFiles[dir].push(path.basename(file));
 }
}

function readdirSync(directoryPath) {
 return mockFiles[directoryPath] || [];
}

fs.__setMockFiles = __setMockFiles;
fs.readdirSync = readdirSync;

module.exports = fs;

现在我们编写测试。

请注意，我们需要明确告诉我们要模拟fs模块，因为它是一个核心Node模块：

src/__tests__/FileSummarizer-test.js

const fs = require('fs');
const FileSummarizer = require('../lib/FileSummarizer');

jest.mock('fs');

describe('listFilesInDirectorySync', () => {
 const MOCK_FILE_INFO = {
 '/path/to/file1.js': 'console.log("file1 contents");',
 '/path/to/file2.txt': 'file2 contents',
 };

 beforeEach(() => {
 // Set up some mocked out file info before each test
 fs.__setMockFiles(MOCK_FILE_INFO);
 });

 test('includes all files in the directory in the summary', () => {
 const fileSummary = FileSummarizer.summarizeFilesInDirectorySync('/path/to');

 expect(fileSummary.length).toBe(2);
 });
});

此处显示的示例模拟使用jest.genMockFromModule生成自动模拟，并覆盖其默认行为。

这是推荐的方法，但完全是可选的。

如果您根本不想使用自动模拟，则只需从模拟文件中导出自己的函数即可。

完全手动模拟的一个缺点是它们是手动的 - 这意味着你必须在它们模拟的模块发生变化时手动更新它们。

因此，最好在满足您的需求时使用或扩展自动模拟。

为了确保手动模拟及其实际实现保持同步，在手动模拟中使用require.requireActual(moduleName)并在导出之前使用模拟函数修改它可能是有用的。

项目实践地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.28

React 16 Jest定时器模拟 Timer Mocks

Mon, 07 Jul 2025 16:42:14 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.26
npm install

定时器模拟(Timer Mocks)

原生定时器功能(即setTimeout，setInterval，clearTimeout，clearInterval)对于测试环境来说不太理想，因为它们依赖于实时时间。
Jest可以将定时器换成允许我们自己控制时间的功能。
示例如下
src/lib/timerGame.js

function timerGame(callback) {
 console.log('Ready....go!');
 setTimeout(() => {
 console.log('Times up -- stop!');
 return callback && callback();
 }, 1000);
}

module.exports = timerGame;

src/__tests__/jest_timerGame.test.js

const timerGame = require('../lib/timerGame');

jest.useFakeTimers();

test('等待1秒钟后结束游戏', () => {
 timerGame();

 expect(setTimeout).toHaveBeenCalledTimes(1);
 expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000);
});

这里我们通过调用jest.useFakeTimers();来启用假定时器。
这使用模拟函数模拟了setTimeout和其他计时器函数。
如果在一个文件或描述块中运行多个测试，则jest.useFakeTimers();
可以在每次测试之前手动调用，也可以使用诸如beforeEach之类的设置函数调用。
不这样做会导致内部使用计数器不被重置。

运行所有计时器(Run All Timers)

为上面的模块timerGame写一个测试，这个测试在1秒钟后调用回调callback，示例如下

const timerGame = require('../lib/timerGame');
jest.useFakeTimers();

test('1秒钟后调用回调callback', () => {
 const callback = jest.fn();

 timerGame(callback);

 // 在这个时间点上，callback回调函数还没有被调用
 expect(callback).not.toBeCalled();

 // 所有timers被执行
 jest.runAllTimers();

 // 现在我们的callback回调函数被调用
 expect(callback).toBeCalled();
 expect(callback).toHaveBeenCalledTimes(1);
});

运行待定时间器

在某些情况下，您可能还有一个递归计时器 - 这是一个在自己的回调中设置新计时器的计时器。
对于这些，运行所有计时器将是一个无限循环,所以像jest.runAllTimers()这样的东西是不可取的。
对于这些情况，您可以使用jest.runOnlyPendingTimers()。示例如下
src/lib/infiniteTimerGame.js

function infiniteTimerGame(callback) {
 console.log('Ready....go!');

 setTimeout(() => {
 console.log('Times up! 10 seconds before the next game starts...');

 if (callback) {
 callback();
 }

 // 10秒钟后执行下一个
 setTimeout(() => {
 infiniteTimerGame(callback);
 }, 10000);
 }, 1000);
}

module.exports = infiniteTimerGame;

src/__tests__/jest_infiniteTimerGame.test.js

const infiniteTimerGame = require('../lib/infiniteTimerGame');

jest.useFakeTimers();

describe('infiniteTimerGame', () => {
 test('schedules a 10-second timer after 1 second', () => {
 const callback = jest.fn();

 infiniteTimerGame(callback);

 // 在这里，会在意秒钟后执行callback的回调
 expect(setTimeout).toHaveBeenCalledTimes(1);
 expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000);

 // 只有当前待定的计时器（但不是在该过程中创建的任何新计时器）
 jest.runOnlyPendingTimers();

 // 此时，1秒钟的计时器应该已经被回调了
 expect(callback).toBeCalled();

 // 它应该创建一个新的计时器，以便在10秒内启动游戏
 expect(setTimeout).toHaveBeenCalledTimes(2);
 expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 10000);
 });
});

按时间提前计时器(Advance Timers by Time)

另一种可能性是使用jest.advanceTimersByTime（msToRun）。
调用此API时，所有计时器都按msToRun毫秒提前。
将执行已经通过setTimeout()或setInterval()排队并且将在此时间帧期间执行所有待处理"宏任务"。
此外，如果这些宏任务调度将在同一时间帧内执行的新宏任务，那么将执行这些宏任务，直到队列中不再有宏任务应该在msToRun毫秒内运行。
示例如下

const timerGame = require('../lib/timerGame');

jest.useFakeTimers();

it('1秒钟后通过advanceTimersByTime调用回调函数', () => {
 const callback = jest.fn();

 timerGame(callback);

 // callback还没有被执行
 expect(callback).not.toBeCalled();

 // 提前1秒钟执行
 jest.advanceTimersByTime(1000);

 // 所有的callback被调用
 expect(callback).toBeCalled();
 expect(callback).toHaveBeenCalledTimes(1);
});

在某些测试中偶尔可能有用，就是在测试中可以清除所有挂起的计时器。
为此，可以使用jest.clearAllTimers()。

项目实践地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.27

React 16 Jest如何进行异步程序测试

Mon, 07 Jul 2025 16:42:11 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.25
npm install

异步程序测试

首先，在Jest中启用Babel支。执行如下安装命令

npm install babel-jest babel-core regenerator-runtime --save-dev

下面实现一个简单的模块，从API中获取用户数据并返回用户名。

src/lib/user.js添加如下代码

import request from './request';

static getUserName(userID) {
 return request(`/users/${userID}`).then(user => user.name);
}

在上面的实现中，我们希望request.js模块返回一个promise。然后通过传递用户ID来获取用户信息，最后得到一个用户名称。
request.js的获取用户信息的实现如下：src/lib/request.js

const http = require('http');

export default function request(url) {
 return new Promise((resolve) => {
 http.get({
 path: url,
 }, (response) => {
 let data = '';
 response.on('data', (o) => {
 data += o;
 return data;
 });
 response.on('end', () => resolve(data));
 });
 });
}

这里的话希望在测试中不访问网络，所以在__mocks__文件夹中创建一个request.js，手动模拟网络请求(该文件夹区分大小写，’__MOCKS__‘是不起作用的)。
它可能看起来像这样src/lib/__mocks__/request.js

const users = {
 4: {
 name: 'Mark',
 },
 5: {
 name: 'Paul',
 },
};

export default function request(url) {
 return new Promise((resolve, reject) => {
 const userID = parseInt(url.substr('/users/'.length), 10);
 process.nextTick(() => {
 if (users[userID]) {
 return resolve(users[userID]);
 }
 return reject({
 error: `User with ${userID} not found.`,
 });
 });
 });
}

现在为这个异步的功能编写一个测试。src/__tests__/user_async.test.js

import Users from '../lib/user';

jest.mock('../lib/request');

// The assertion for a promise must be returned.
it('works with promises', () =>
 // expect.assertions(1); // 当前版本加了这行总是报错，暂时未注释
 Users
 .getUserName(4)
 .then(data => expect(data).toEqual('Mark')));

运行测试，正常通过测试，如果问题可加群沟通

jest.mock('../lib/request')会告诉Jest去使用我们手动模拟的mock，‘it’期望返回一个Promise，这个Promise的返回结果是resloved。
只要最后返回一个Promise，我们就可以链接尽可能多的Promise，并且随时调用’expect’。

.resolves

有一种不那么冗长的方式是使用’resolves’，让它与任何其他匹配器一起unwrap一个fulfilled promise的值。
如果promise是rejected，则断言将失败。如下

it('works with resolves', () => {
 expect.assertions(1);
 return expect(user.getUserName(5)).resolves.toEqual('Paul');
});

async/await

使用async/await语法编写测试很容易。可以写一个和上面实例一致的测试。如下

import Users from '../lib/user';

jest.mock('../lib/request');

it('works with async/await', async () => {
 const data = await Users.getUserName(4);
 expect(data).toEqual('Mark');
});

it('works with async/await and resolves', async () => {
 expect.assertions(1);
 await expect(Users.getUserName(5)).resolves.toEqual('Paul');
});

为了使得测试中支持 async/await, 需要安装 babel-preset-env 并且在开通这个属性在.babelrc文件中.

Error handling

可以使用.catch方法处理错误。
确保添加expect.assertions以验证是否调用了一定数量的断言。
否则，一个fulfilled promise不会使测试失败：如下

import Users from '../lib/user';

jest.mock('../lib/request');

test('tests error with promises', async () => {
 expect.assertions(1);
 return Users.getUserName(2).catch(e =>
 expect(e).toEqual({
 error: 'User with 2 not found.',
 }));
});

it('tests error with async/await', async () => {
 expect.assertions(1);
 try {
 await Users.getUserName(1);
 } catch (e) {
 expect(e).toEqual({
 error: 'User with 1 not found.',
 });
 }
});

.rejects

.rejects帮助程序就像.resolves帮助程序一样。
如果promise是满足的，测试将自动失败。

import Users from '../lib/user';

jest.mock('../lib/request');
it('tests error with rejects', () => {
 expect.assertions(1);
 return expect(Users.getUserName(3)).rejects.toEqual({
 error: 'User with 3 not found.',
 });
});

it('tests error with async/await and rejects', async () => {
 expect.assertions(1);
 await expect(Users.getUserName(3)).rejects.toEqual({
 error: 'User with 3 not found.',
 });
});

项目实践地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.26

React 16 Jest快照测试

Mon, 07 Jul 2025 16:42:07 +0000

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.24
npm install

只要想确保UI不会意外更改，快照测试是非常有用的工具。

移动应用程序的典型呈现UI组件快照测试用例，通过截取屏幕截图，然后将其与存储在测试这边的参考图像进行比较。

如果两个图像不匹配，测试将失败，可能是被意外的更改了，或者需要将屏幕截图更新为新版本的UI组件。

Jest快照测试

在测试React组件时，可以采用类似的方法。
可以使用测试渲染器快速生成React树的可序列化值，而不是渲染需要构建整个应用程序的图形UI。

下面做一个简单的Link组件的示例测试：
测试之前先安装下react-test-renderer依赖库

npm install react-test-renderer --save-dev

src/__tests__/react_link.react.jsx

import React from 'react';
import renderer from 'react-test-renderer';
import ALink from '../components/Link.react';

it('正确的渲染', () => {
 const tree = renderer
 .create(<ALink page="https://www.gowhich.com">Gowhich</ALink>)
 .toJSON(); expect(tree).toMatchSnapshot();
});

src/components/Link.react.jsx

import React from 'react';
import PropTypes from 'prop-types';

const STATUS = {
 HOVERED: 'hovered',
 NORMAL: 'normal',
};

class Link extends React.Component {
 constructor(props) {
 super(props);

 this.onMouseEnter = this.onMouseEnter.bind(this);
 this.onMouseleave = this.onMouseleave.bind(this);
 this.state = {
 class: STATUS.NORMAL,
 };
 }

 onMouseEnter() {
 this.setState({
 class: STATUS.HOVERED,
 });
 }

 onMouseleave() {
 this.setState({
 class: STATUS.NORMAL,
 });
 }

 render() {
 return (
 <a
 className={this.state.class}
 href={this.props.page || '#'}
 onMouseEnter={this.onMouseEnter}
 onMouseLeave={this.onMouseleave}
 >
 {this.props.children}
 </a>
 );
 }
}

Link.propTypes = {
 page: PropTypes.string.isRequired,
 children: PropTypes.oneOfType([
 PropTypes.element,
 PropTypes.string,
 ]).isRequired,
};

export default Link;

第一次运行此测试时，Jest会创建一个如下所示的快照文件：
src/__tests__/__snapshots__/react_link.test.jsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`正确的渲染 1`] = `
<a
 className="normal"
 href="https://www.gowhich.com"
 onMouseEnter={[Function]}
 onMouseLeave={[Function]}
>
 Gowhich
</a>
`;

快照文件应该与代码更改一起提交，并作为代码审查过程的一部分进行审核。
Jest使用pretty-format对快照文件进行了处理，当代码在审查期间，会让代码快照变成让人类可阅读的文件。
在随后的测试运行中，Jest会将渲染的输出的文件与之前的快照进行比较。
如果匹配，测试将通过。如果它们不匹配，表示代码出问题了。Jest则会告知代码中哪里需要进行修改的错误或者是代码的逻辑需要进行更新，重新生成快照。我们是试着更改下page参数的地址和Gowhich文案，如下
src/__tests__/react_link.react.jsx

import React from 'react';
import renderer from 'react-test-renderer';
import ALink from '../components/Link.react';

it('正确的渲染', () => {
 const tree = renderer
 .create(<ALink page="https://www.walkerfree.com">Walkerfree</ALink>)
 .toJSON(); expect(tree).toMatchSnapshot();
});

再次执行测试，会得到类似如下的输出，这里我就只截取错误这部分的内容

 ✕ 正确的渲染 (22ms)

 ● 正确的渲染

 expect(value).toMatchSnapshot()

 Received value does not match stored snapshot "正确的渲染 1".

 - Snapshot
 + Received

 <a
 className="normal"
 - href="https://www.gowhich.com"
 + href="https://www.walkerfree.com"
 onMouseEnter={[Function]}
 onMouseLeave={[Function]}
 >
 - Gowhich
 + Walkerfree
 </a>

 6 | const tree = renderer
 7 | .create(<ALink page="https://www.walkerfree.com">Walkerfree</ALink>)
 > 8 | .toJSON(); expect(tree).toMatchSnapshot();
 | ^
 9 | });
 10 |

 at Object.<anonymous> (src/__tests__/react_link.test.jsx:8:29)

 › 1 snapshot failed.
Snapshot Summary
 › 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with `-u` to update them.

由于刚刚更新了组件以指向不同的地址和文案，而且这次更改是合理的，是我们希望的逻辑，这个时候快照测试会失败，因为刚更新的组件的快照不再与此测试用例的快照相匹配。

为了解决这个问题，我们需要更新快照文件，只需要运行下面的命令，就会重新生成快照

npx jest src/__tests__/react_link.test.jsx --notify --watchman=false --updateSnapshot

这个时候我们就需要同之前一样，将这个新的快照文件同代码的更改一起提交。

快照交互模式

执行如下命令

npx jest src/__tests__/react_link.test.jsx --notify --watchman=false --updateSnapshot --watch

只是加了一个

--watch

运行上面的命令会得到类似如下的输出

 PASS src/__tests__/react_link.test.jsx
 ✓ 正确的渲染 (17ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 1 passed, 1 total
Time: 1.713s
Ran all test suites matching /src\/__tests__\/react_link.test.jsx/i.

Active Filters: filename /src/__tests__/react_link.test.jsx/
 › Press c to clear filters.

Watch Usage
 › Press a to run all tests.
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

而且会对测试文件进行检测。如果有文件改动了，会自动重新启动测试，然后对测试文件，进行重新测试属性匹配器

通常有时候，一个对象的属性的值被生成，但是在进行快照生成时候，这个值就固定了，下载再次执行测试的时候就会报错，如下

it('这个快照再次测试的时候会失败', () => {
 const user = {
 createAt: new Date(),
 id: Math.floor(Math.random() * 20),
 name: 'Durban',
 };

 expect(user).toMatchSnapshot();
});

执行后生成的快照如下

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`这个快照再次测试的时候会失败 1`] = `
Object {
 "createAt": 2018-07-06T06:44:49.429Z,
 "id": 0,
 "name": "Durban",
}
`;

其实从下面这里我们就已经能发现问题了

"createAt": 2018-07-06T06:44:49.429Z,

日期是每次执行一次都会变化的。当我们再次执行的时候会发现报出了如下错误

 ✕ 这个快照再次测试的时候会失败 (14ms)

 ● 这个快照再次测试的时候会失败

 expect(value).toMatchSnapshot()

 Received value does not match stored snapshot "这个快照再次测试的时候会失败 1".

 - Snapshot
 + Received

 Object {
 - "createAt": 2018-07-06T06:44:49.429Z,
 - "id": 0,
 + "createAt": 2018-07-06T06:46:02.245Z,
 + "id": 10,
 "name": "Durban",
 }

 6 | };
 7 |
 > 8 | expect(user).toMatchSnapshot();
 | ^
 9 | });
 10 |

 at Object.<anonymous> (src/__tests__/jest_snap_property.test.js:8:16)

 › 1 snapshot failed.
Snapshot Summary
 › 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with `-u` to update them.

针对这个情况我们可以这样解决，在测试里面加入如下代码

expect(user).toMatchSnapshot({
 createAt: expect.any(Date),
 id: expect.any(Number),
});

修改后代码如下

it('检查匹配器并测试通过', () => {
 const user = {
 createAt: new Date(),
 id: Math.floor(Math.random() * 20),
 name: 'Durban',
 };

 expect(user).toMatchSnapshot({
 createAt: expect.any(Date),
 id: expect.any(Number),
 });
});

执行更新操作，对快照进行更新得到的快照内容结果如下

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`检查匹配器并测试通过 1`] = `
Object {
 "createAt": Any<Date>,
 "id": Any<Number>,
 "name": "Durban",
}
`;

项目实践地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.25

React 16 Jest单元测试之 Jest工具

Mon, 07 Jul 2025 16:42:03 +0000

项目初始化【这里使用之前的项目，节省时间】

项目初始化地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.23

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.23
npm install

Jest有很多特定的功能，可以作为单独的包来使用，下面罗列下官网提供的一些有用的包

环境

node --version
v8.11.3

node的安装包方法我就不介绍了，如果看了这么久我的分享还是不知道的话，可以继续看看前面文章，这里简单提示下，安装命令如下

npm install package_name --save // 生产安装
npm install package_name --save-dev // 开发安装

1、jest-changed-files

此工具提供的功能是标识在git或hg中被修改过的文件，提供的方法如下

getChangedFilesForRoots 返回一个promise，该promise将解析为具有已更改文件和repos的对象。

findRepos 返回一个promise，该promise将解析为指定路径中包含的一组存储库。

演示如下

const { getChangedFilesForRoots } = require('jest-changed-files');

getChangedFilesForRoots(['./'], {
 lastCommit: true,
}).then(result => console.log(result.changedFiles));

运行后得到类似如下结果

Set {
 '/xxx/webpack-react-demo/src/__tests__/jest_mock_names.test.js' }

2、jest-diff

用于可视化数据变化的工具。导出一个比较任意类型的两个值的函数，并返回一个"pretty-printed"的字符串，说明两个参数之间的差异。

演示如下

const diff = require('jest-diff');

const a = { a: { b: { c: 5 } } };
const b = { a: { b: { c: 6 } } };

const result = diff(a, b);

console.log(result);

运行后输出的结果类似如下

- Expected
+ Received

 Object {
 "a": Object {
 "b": Object {
- "c": 5,
+ "c": 6,
 },
 },
 }

3、jest-docblock

用于提取和解析JavaScript文件顶部注释的工具。导出各种函数来操作注释块内的数据。

演示如下

const { parseWithComments } = require('jest-docblock');

const code = `
 /**
 * 这是一个例子
 * 
 * @author durban
 * 
 */
 console.log('Hello Jest!');
`;

const parsed = parseWithComments(code);
console.log(parsed);

运行后输出结果类似如下

{ comments: ' /**\n这是一个例子\n\n \n/\n console.log(\'Hello Jest!\');',
 pragmas: { author: 'durban' } }

4、jest-get-type

标识任何JavaScript值的基本类型的模块。导出一个函数，该函数返回一个字符串，其值的类型作为参数传递。

演示如下

const getType = require('jest-get-type');

const array = [1, 2, 3];
const nullvalue = null;
const undefinedValue = undefined;

console.log(getType(array));
console.log(getType(nullvalue));
console.log(getType(undefinedValue));

运行后输出结果类似如下

array
null
undefined

5、jest-validate

用于验证用户提交的配置的工具。

导出一个带有两个参数的函数：用户的配置和包含示例配置和其他选项的对象。

返回值是一个具有两个属性的对象，如下：

hasDeprecationWarnings 一个布尔值，指示提交的配置是否具有弃用警告

isValid 一个布尔值，指示配置是否正确。

演示如下

const { validate } = require('jest-validate');

const configByUser = {
 tranform: '<rootDir>/node_modules/my-custom-packages',
};

const result = validate(configByUser, {
 comment: ' Documentation: http://custom-docs.com',
 exampleConfig: {
 tranform: '<rootDir>/node_modules/jest-validate',
 },
});

console.log(result);

运行后输出结果类似如下

{ hasDeprecationWarnings: false, isValid: true }

6、jest-worker

用于并行化任务的模块。

导出一个类Worker，它接受Node.js模块的路径，并允许您调用模块的导出方法，就好像它们在类方法中一样，返回一个promise，当指定的方法在forked进程中完成它的执行时解析。

演示如下

创建一个task.js

module.exports = {
 Task: args => args,
};

调用的代码如下

const { default: Worker } = require('jest-worker');

async function main() {
 const worker = new Worker(require.resolve('./task.js'));

 const results = await Promise.all([
 worker.Task({ args: '1' }),
 worker.Task({ args: '2' }),
 ]);

 console.log(results);
}

main();

运行后输出结果类似如下

[ { args: '1' }, { args: '2' } ]

这里用了一个看起来很奇怪的用法，其实不然，仔细了解下node包的机制，还是很好理解的

const { default: Worker } = require('jest-worker');

如果你的node版本支持import的话可以替换为，【我试了下10.5.0这个nodejs版本还是不支持呀】

import Worker from 'jest-worker';

7、pretty-format

导出将任何JavaScript值转换为人类可读字符串的函数。

支持开箱即用的所有内置JavaScript类型，并允许通过用户定义的特定应用程序类型的扩展。

演示如下

const prettyFormat = require('pretty-format');

const val = { object: {} };
val.circuleReference = val;
val[Symbol('key')] = 'key';
val.map = new Map([['property', 'value']]);
val.array = [-0, Infinity, NaN];

console.log(prettyFormat(val));

运行后输出结果类似如下

Object {
 "array": Array [
 -0,
 Infinity,
 NaN,
 ],
 "circuleReference": [Circular],
 "map": Map {
 "property" => "value",
 },
 "object": Object {},
 Symbol(key): "key",
}

Jest的包远不止这些，有兴趣的可以继续去https://github.com/facebook/jest/tree/master/packages这里观望自己想要的

项目实践地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.24

React 16 + Jest单元测试之 Mock Functions(Mock Names 和 Custom Matchers)

Mon, 07 Jul 2025 16:42:01 +0000

项目初始化【这里使用之前的项目，节省时间】

项目初始化地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.22

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.22
npm install

Mock Names

您可以选择为mock function提供一个名称，该名称将在测试错误输出中显示，而不是"jest.fn()"。如果您希望能够快速识别在测试输出中报告错误的mock function，请使用此选项。如下

const myMockFunc = jest
 .fn()
 .mockReturnValue('default')
 .mockImplementation(v => 42 + v)
 .mockName('add42');

test('add 42', () => {
 expect(myMockFunc(1)).toEqual(43);
});

Custom Matchers

最后，为了简化断言如何调用mock函数，Jest提供了一些自定义匹配器函数，如下

// mock function至少被调用一次
expect(mockFunc).toBeCalled();

// mock function至少在带有具体参数的情况下被调用一次
expect(mockFunc).toBeCalledWith(arg1, arg2);

// mock function最后在带有具体参数的情况下被调用
expect(mockFunc).lastCalledWith(arg1, arg2);

// 所有的调用和mock被作为snapshot写入到文件
expect(mockFunc).toMatchSnapshot();

这些匹配器实际上只是用于检查.mock属性的常见形式的糖。

可以自己手动完成此操作，如果想这更符合自己的口味或者需要做一些更具体的事情，比如如下这些

// mock function至少被调用一次
expect(mockFunc.mock.calls.length).toBeGreaterThan(0);

// mock function至少在带有具体参数的情况下被调用一次
expect(mockFunc.mock.calls).toContain([arg1, arg2]);

// mock function最后在带有具体参数的情况下被调用
expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1]).toEqual([
 arg1,
 arg2,
]);

// mock function被最后一次调用传入的第一个参数是`42`
expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1][0]).toBe(42);

// 一个snapshot将会检查mock在以同样的参数同样的次数被调用，它也将在名称上断言
expect(mockFunc.mock.calls).toEqual([[arg1, arg2]]);
expect(mockFunc.mock.getMockName()).toBe('a mock name');

如果想要一个完成的matchers，可以到官网点击这里去查看

项目实践地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.23

React16 Jest单元测试之 Mock Functions(Mocking Modules 和 Mock Implementations)

Mon, 07 Jul 2025 16:41:57 +0000

项目初始化【这里使用之前的项目，节省时间】

项目初始化地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.21

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.21
npm install

Mocking Modules

假设我们有一个从API中获取用户的类。该类使用axios调用API然后返回包含所有用户的data属性：

因为要用到axios，需要安装下axios,

运行

npm install axios --save

然后创建文件src/lib/user.js

import axios from 'axios';

class Users {
 static all() {
 return axios.get('/user.json').then(resp => resp.data);
 }
}

export default Users;

创建文件src/__tests__/user.test.js

import axios from 'axios';
import Users from '../lib/user';

jest.mock('axios');

test('should fetch users', () => {
 const resp = {
 data: [
 {
 name: 'Durban',
 },
 ],
 };

 axios.get.mockResolvedValue(resp);
 // 或者也可以使用下面的代码
 // axios.get.mockImplementation(() => Promise.resolve(resp));

 return Users.all().then(users => expect(users).toEqual(resp.data));
});

现在，为了不在实际访问API的情况下测试此方法（从而创建缓慢且脆弱的测试），我们可以使用jest.mock（…）函数自动模拟axios模块。

一旦我们模拟了模块，我们就可以为.get提供一个mockReturnValue，它返回我们测试希望要的断言数据。实际上，我们说我们希望axios.get（’/users.json’）返回一个假响应。

Mock Implementations

尽管如此，有些情况下超出指定返回值的能力和全面替换模拟函数的实现是有用的。这可以使用jest.fn或mock函数上的mockImplementationOnce方法来实现。如下

const myMockFn = jest.fn(cb => cb(null, true));

myMockFn((err, val) => console.log(val));
// > true
myMockFn((err, val) => console.log(val));
// > true

当需要定义从另一个模块创建的模拟函数的默认实现时，mockImplementation方法很有用，如下

// foo.js
module.exports = function() {
 // some implementation;
};

// test.js
jest.mock('../foo'); // this happens automatically with automocking
const foo = require('../foo');

// foo is a mock function
foo.mockImplementation(() => 42);
foo();
// > 42

当需要重新创建模拟函数的复杂行为，以便多个函数调用产生不同的结果时，请使用mockImplementationOnce方法，如下

const myMockFn = jest
 .fn()
 .mockImplementationOnce(cb => cb(null, true))
 .mockImplementationOnce(cb => cb(null, false));

myMockFn((err, val) => console.log(val));
// > true

myMockFn((err, val) => console.log(val));
// > false

当mocked函数超出了mockImplementationOnce定义的实现次数时，它将使用jest.fn执行默认实现集（如果已定义），如下

const myMockFn = jest
 .fn(() => 'default')
 .mockImplementationOnce(() => 'first call')
 .mockImplementationOnce(() => 'second call');

console.log(myMockFn(), myMockFn(), myMockFn(), myMockFn());
// > 'first call', 'second call', 'default', 'default'

对于我们有通常链接的方法（因此总是需要返回这个）的情况，我们有一个含糖API，以.mockReturnThis（）函数的形式简化它，该函数也位于所有模拟上，如下

const myObj = {
 myMethod: jest.fn().mockReturnThis(),
};

跟如下是类似的

const otherObj = {
 myMethod: jest.fn(function() {
 return this;
 }),
};

项目实践地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.22

React16 Jest单元测试之 Mock Functions(Mock Return Values)

Mon, 07 Jul 2025 16:41:53 +0000

项目初始化【这里使用之前的项目，节省时间】

项目初始化地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.20

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.20
npm install

Mock Return Values

Jest的模拟函数(Mock function)也可以用来在测试中注入测试值到测试的代码中，如下

const myMock = jest.fn();
console.log(myMock);

myMock
 .mockReturnValueOnce(10)
 .mockReturnValueOnce('x')
 .mockReturnValue(true);

console.log(myMock(), myMock(), myMock(), myMock(), myMock());

运行npx jest src/__tests__/jest_mock_return_values.test.js –notify –watchman=false 后输出的结果类似如下

console.log src/__tests__/jest_mock_return_values.test.js:2
{ [Function: mockConstructor]
 _isMockFunction: true,
 getMockImplementation: [Function],
 mock: [Getter/Setter],
 mockClear: [Function],
 mockReset: [Function],
 mockRestore: [Function],
 mockReturnValueOnce: [Function],
 mockResolvedValueOnce: [Function],
 mockRejectedValueOnce: [Function],
 mockReturnValue: [Function],
 mockResolvedValue: [Function],
 mockRejectedValue: [Function],
 mockImplementationOnce: [Function],
 mockImplementation: [Function],
 mockReturnThis: [Function],
 mockName: [Function],
 getMockName: [Function] }

console.log src/__tests__/jest_mock_return_values.test.js:9
10 'x' true true true

模拟函数(Mock function)在使用函数continuation-passing风格的代码中也非常有效。以这种风格编写的代码有助于避免需要复杂的存根，以重新创建它们所代表的真实组件的行为，从而倾向于在使用它们之前直接将值注入测试中。具体看如下代码

const filterTestFn = jest.fn();

// 第一次mock返回true,第二次mock返回false
filterTestFn.mockReturnValueOnce(true).mockReturnValueOnce(false);

const result = [11, 12].filter(filterTestFn);

console.log(result);
console.log(filterTestFn.mock.calls);

运行npx jest src/__tests__/jest_mock_return_values.test.js –notify –watchman=false 后得到的结果类似如下

console.log src/__tests__/jest_mock_return_values.test.js:20
[ 11 ]

console.log src/__tests__/jest_mock_return_values.test.js:22
[ [ 11, 0, [ 11, 12 ] ], [ 12, 1, [ 11, 12 ] ] ]

现实世界中大多数的例子实际上是在依赖的组件上获取模拟函数并对其进行配置，但技术是相同的。在这些情况下，尽量避免在没有直接测试的任何函数内部实现逻辑。

项目实践地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.21

React16 Jest单元测试之 Mock Functions(Using a mock function)

Mon, 07 Jul 2025 16:41:48 +0000

项目初始化【这里使用之前的项目，节省时间】

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.19

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.19
npm install

mock function 可以通过擦除函数的实际实现，捕获对函数的调用（以及在这些调用中传递的参数），在使用new实例化时捕获构造函数的实例，以及允许test-time来轻松测试代码之间的链接返回值的配置。

有两种方法来mock function：通过创建一个mock function来使用测试代码，或者编写一个手动模拟来覆盖模块依赖。

下面先记录下如何使用mock function

Using a mock function

假设我们正在测试一个函数forEach的实现，它调用所提供数组中每个项的回调。如下

function forEach(items, callback) {
 for (let i = 0; i < items.length; i += 1) {
 callback(items[i]);
 }
}

const mockFunction = jest.fn();
forEach([0, 1], mockFunction);

test('mockFunction被调用2次', () => {
 expect(mockFunction.mock.calls.length).toBe(2);
});

test('第一个调用第一个参数是0', () => {
 expect(mockFunction.mock.calls[0][0]).toBe(0);
});

test('第一个调用第一个参数是1', () => {
 expect(mockFunction.mock.calls[1][0]).toBe(1);
});

运行

npx jest src/__tests__/jest_use_mock_function.test.js --notify --watchman=false

后输出结果类似如下

PASS src/__tests__/jest_use_mock_function.test.js
 ✓ mockFunction被调用2次 (5ms)
 ✓ 第一个调用第一个参数是0
 ✓ 第一个调用第一个参数是1

Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 2.341s
Ran all test suites matching /src\/__tests__\/jest_use_mock_function.test.js/i.

.mock property

所有模拟函数都有这个特殊的.mock属性，它是关于如何调用函数以及保留函数返回的数据的地方。.mock属性还会跟踪每次调用的值，因此也可以检查它：

const myMock = jest.fn();

const a = new myMock();
const b = {};
const bound = myMock.bind(b);
bound();

console.log(myMock.mock.instances);

运行后会看到console.log输出的内容类似如下

[ mockConstructor {}, {} ]

这些模拟成员在测试中非常有用，用于断言这些函数如何被调用，实例化或他们返回了什么，代码如下

// 函数被调用的次数
expect(someMockFunction.mock.calls.length).toBe(1);

// 函数第1次被调用的第一个参数值是'first arg'
expect(someMockFunction.mock.calls[0][0]).toBe('first arg');

// 函数第2次被调用的第一个参数值是'second arg'
expect(someMockFunction.mock.calls[0][1]).toBe('second arg');

// 函数第1次被调用的返回值是'return value'
expect(someMockFunction.mock.results[0].value).toBe('return value');

// 函数被实例化了2次
expect(someMockFunction.mock.instances.length).toBe(2);

// 函数第一次被实例化返回的对象里面有个'name'的属性，它的值为'test'
expect(someMockFunction.mock.instances[0].name).toEqual('test');

具体如何使用后面的分享会涉及到多多关注

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.20

React16 Jest单元测试之 Setup and Teardown(作用域、describe和test的执行顺序)

Mon, 07 Jul 2025 16:41:44 +0000

项目初始化【这里使用之前的项目，节省时间】

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.18

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.18
npm install

Scoping 作用域

默认情况下，before和after中的代码适用于每个测试模块。

describe可以将测试分组，将多个测分到一个有意义的组里面。

当describe块将测试分组在一起时，before和after中的代码仅适用于describe块内的测试。具体如下

假设有城市数据库和食品数据库。我们分别可以为不同的测试做不同的设置：

const citys = [];
const foods = [];
let time1 = 1;
let time2 = 1;
const isCity = (city) => {
 if (citys.indexOf(city) > -1) {
 return true;
 }
 return false;
};

const isCityAndFood = (cityAndFood) => {
 let hasCity = false;
 let hasFood = false;

 if (citys.indexOf(cityAndFood.city) > -1) {
 hasCity = true;
 }

 if (foods.indexOf(cityAndFood.food) > -1) {
 hasFood = true;
 }

 if (hasCity && hasFood) {
 return true;
 }

 return false;
};
const initCityDatabase = () => new Promise((resolve, reject) => {
 let promise;

 try {
 setTimeout(() => {
 console.log('initCityDatabase time = ', time1);
 if (time1 === 1) {
 citys.push('Shanghai');
 } else if (time1 === 2) {
 citys.push('Chifeng');
 }
 time1 += 1;
 promise = resolve(citys);
 }, 1000);
 } catch (err) {
 return reject(err);
 }

 return promise;
});

const initFoodDatabase = () => new Promise((resolve, reject) => {
 let promise;

 try {
 setTimeout(() => {
 console.log('initFoodDatabase time = ', time2);
 if (time2 === 1) {
 foods.push('Banana');
 } else if (time2 === 2) {
 foods.push('Apple');
 }
 time2 += 1;
 promise = resolve(foods);
 }, 1000);
 } catch (err) {
 return reject(err);
 }

 return promise;
});

beforeEach(() => initCityDatabase());

test('city database has Shanghai', () => {
 expect(isCity('Shanghai')).toBeTruthy();
});

test('city database has Chifeng', () => {
 expect(isCity('Chifeng')).toBeTruthy();
});

describe('matching cities to foods', () => {
 beforeEach(() => initFoodDatabase());

 test('database has Shanghai and Banana', () => {
 expect(isCityAndFood({
 city: 'Shanghai',
 food: 'Banana',
 })).toBe(true);
 });

 test('database has Chifeng and Apple', () => {
 expect(isCityAndFood({
 city: 'Chifeng',
 food: 'Apple',
 })).toBe(true);
 });
});

执行npm test得到类似如下结果

> xx@xx test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS src/__tests__/jest_async_promise.test.js (6.41s)
 PASS src/__tests__/jest_async_await.test.js (6.401s)
 PASS src/__tests__/jest_setup_describe.js (7.09s)
 ● Console

 console.log src/__tests__/jest_setup_describe.js:35
 initCityDatabase time = 1
 console.log src/__tests__/jest_setup_describe.js:35
 initCityDatabase time = 2
 console.log src/__tests__/jest_setup_describe.js:35
 initCityDatabase time = 3
 console.log src/__tests__/jest_setup_describe.js:56
 initFoodDatabase time = 1
 console.log src/__tests__/jest_setup_describe.js:35
 initCityDatabase time = 4
 console.log src/__tests__/jest_setup_describe.js:56
 initFoodDatabase time = 2

 PASS src/__tests__/jest_async_callback.test.js
 PASS src/__tests__/CheckboxWithLabelComponent.test.jsx
 PASS src/__tests__/jest_common.test.js
 PASS src/__tests__/sum.test.js
 PASS src/__tests__/jest_setup_each_onetime.test.js
 PASS src/__tests__/jest_setup_each_moretime.test.js

Test Suites: 9 passed, 9 total
Tests: 30 passed, 30 total
Snapshots: 0 total
Time: 12.94s
Ran all test suites.

请注意这里

● Console

 console.log src/__tests__/jest_setup_describe.js:35
 initCityDatabase time = 1
 console.log src/__tests__/jest_setup_describe.js:35
 initCityDatabase time = 2
 console.log src/__tests__/jest_setup_describe.js:35
 initCityDatabase time = 3
 console.log src/__tests__/jest_setup_describe.js:56
 initFoodDatabase time = 1
 console.log src/__tests__/jest_setup_describe.js:35
 initCityDatabase time = 4
 console.log src/__tests__/jest_setup_describe.js:56
 initFoodDatabase time = 2

initCityDatabase执行了4次，initFoodDatabase执行了2次，这是因为顶级beforeEach在describe块内的beforeEach之前执行。

这可能有助于说明所有钩子的执行顺序。下面来做个比较

beforeAll(() => console.log('1 - beforeAll'));
afterAll(() => console.log('1 - afterAll'));
beforeEach(() => console.log('1 - beforeEach'));
afterEach(() => console.log('1 - afterEach'));
test('', () => console.log('1 - test'));
describe('Scoped / Nested block', () => {
 beforeAll(() => console.log('2 - beforeAll'));
 afterAll(() => console.log('2 - afterAll'));
 beforeEach(() => console.log('2 - beforeEach'));
 afterEach(() => console.log('2 - afterEach'));
 test('', () => console.log('2 - test'));
});

运行npm test得到结果如下

xx@xx test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS src/__tests__/jest_setup_describe_diff.js
 ● Console

 console.log src/__tests__/jest_setup_describe_diff.js:1
 1 - beforeAll
 console.log src/__tests__/jest_setup_describe_diff.js:3
 1 - beforeEach
 console.log src/__tests__/jest_setup_describe_diff.js:5
 1 - test
 console.log src/__tests__/jest_setup_describe_diff.js:4
 1 - afterEach
 console.log src/__tests__/jest_setup_describe_diff.js:7
 2 - beforeAll
 console.log src/__tests__/jest_setup_describe_diff.js:3
 1 - beforeEach
 console.log src/__tests__/jest_setup_describe_diff.js:9
 2 - beforeEach
 console.log src/__tests__/jest_setup_describe_diff.js:11
 2 - test
 console.log src/__tests__/jest_setup_describe_diff.js:10
 2 - afterEach
 console.log src/__tests__/jest_setup_describe_diff.js:4
 1 - afterEach
 console.log src/__tests__/jest_setup_describe_diff.js:8
 2 - afterAll
 console.log src/__tests__/jest_setup_describe_diff.js:2
 1 - afterAll

 PASS src/__tests__/jest_async_promise.test.js (6.439s)
 PASS src/__tests__/jest_setup_describe.js (7.13s)
 PASS src/__tests__/jest_async_await.test.js (6.063s)
 PASS src/__tests__/jest_async_callback.test.js
 PASS src/__tests__/jest_common.test.js
 PASS src/__tests__/CheckboxWithLabelComponent.test.jsx
 PASS src/__tests__/sum.test.js
 PASS src/__tests__/jest_setup_each_onetime.test.js
 PASS src/__tests__/jest_setup_each_moretime.test.js

Test Suites: 10 passed, 10 total
Tests: 32 passed, 32 total
Snapshots: 0 total
Time: 12.892s
Ran all test suites.

可以从这里看出其执行的顺序

● Console

 console.log src/__tests__/jest_setup_describe_diff.js:1
 1 - beforeAll
 console.log src/__tests__/jest_setup_describe_diff.js:3
 1 - beforeEach
 console.log src/__tests__/jest_setup_describe_diff.js:5
 1 - test
 console.log src/__tests__/jest_setup_describe_diff.js:4
 1 - afterEach
 console.log src/__tests__/jest_setup_describe_diff.js:7
 2 - beforeAll
 console.log src/__tests__/jest_setup_describe_diff.js:3
 1 - beforeEach
 console.log src/__tests__/jest_setup_describe_diff.js:9
 2 - beforeEach
 console.log src/__tests__/jest_setup_describe_diff.js:11
 2 - test
 console.log src/__tests__/jest_setup_describe_diff.js:10
 2 - afterEach
 console.log src/__tests__/jest_setup_describe_diff.js:4
 1 - afterEach
 console.log src/__tests__/jest_setup_describe_diff.js:8
 2 - afterAll
 console.log src/__tests__/jest_setup_describe_diff.js:2
 1 - afterAll

Order of execution of describe and test blocks - describe和test的执行顺序

在一个测试文件中Jest在执行真实的测试之前先执行所有describe的handlers。

这是在before*和after*的handlers中进行setup和teardown的另一个原因而不是在describe blocks。

一旦describe blocks完成，默认情况下，Jest将按照它们在collection phase遇到的顺序依次运行所有测试，等待每个测试完成并在继续之前进行整理。

理解起来很难，看下下面的例子，考虑下下面的代码猜测下输出的顺序是什么：

describe('outer', () => {
 console.log('describe outer-a');

 describe('describe inner 1', () => {
 console.log('describe inner 1');
 test('test 1', () => {
 console.log('test for describe inner 1');
 expect(true).toEqual(true);
 });
 });

 console.log('describe outer-b');

 test('test 1', () => {
 console.log('test for describe outer');
 expect(true).toEqual(true);
 });

 describe('describe inner 2', () => {
 console.log('describe inner 2');
 test('test for describe inner 2', () => {
 console.log('test for describe inner 2');
 expect(false).toEqual(false);
 });
 });

 console.log('describe outer-c');
});

执行npm test，看下下面这块的输出

● Console

 console.log src/__tests__/jest_setup_describe_order.js:2
 describe outer-a
 console.log src/__tests__/jest_setup_describe_order.js:5
 describe inner 1
 console.log src/__tests__/jest_setup_describe_order.js:12
 describe outer-b
 console.log src/__tests__/jest_setup_describe_order.js:20
 describe inner 2
 console.log src/__tests__/jest_setup_describe_order.js:27
 describe outer-c
 console.log src/__tests__/jest_setup_describe_order.js:7
 test for describe inner 1
 console.log src/__tests__/jest_setup_describe_order.js:15
 test for describe outer
 console.log src/__tests__/jest_setup_describe_order.js:22
 test for describe inner 2

从输出中可以看出

describe outer-a
describe inner 1
describe outer-b
describe inner 2
describe outer-c

这几行的输出表示从外到内的执行了describe里面的代码，并没有按照顺序执行测试模块，而是在执行完describe只有，在从上到下的按照顺序执行测试模块，这个顺序要好好理解，对于以后的写测试模块的逻辑非常重要。

建议

如果一个测试失败了，首先要检查的事情应该是当测试单独运行的时候测试是否失败。

在Jest中，只运行一个测试很简单 - 只需暂时将该测试命令更改为test.only，如下

test.only('this will be the only test that runs', () => {
 expect(true).toBe(false);
});

test('this test will not run', () => {
 expect('A').toBe('A');
});

这次换个测试命令，不然每次执行npm test会把之前的也一起执行了，命令如下

npx jest src/__tests__/jest_setup_test_only.js

会得到如下的输出

FAIL src/__tests__/jest_setup_test_only.js
 ✕ this will be the only test that runs (10ms)
 ○ skipped 1 test

 ● this will be the only test that runs

 expect(received).toBe(expected) // Object.is equality

 Expected: false
 Received: true

 1 | test.only('this will be the only test that runs', () => {
 > 2 | expect(true).toBe(false);
 | ^
 3 | });
 4 |
 5 | test('this test will not run', () => {

 at Object.<anonymous> (src/__tests__/jest_setup_test_only.js:2:16)

Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 skipped, 2 total
Snapshots: 0 total
Time: 2.344s
Ran all test suites matching /src\/__tests__\/jest_setup_test_only.js/i.

从这里可以看出

✕ this will be the only test that runs (10ms)
 ○ skipped 1 test

有两个测试的但是其中一个被跳过了。

当有一个比较复杂的测试中有一个小的测试总是事变，但是单独运行的时候又是成功的，可能是的原因是不同的测试中的有一些干扰元素干扰了这个测试。可以通过用beforeEach清除一些共享状态来解决这个问题。如果不确定是共享的转状态是否被修改，可以通过加入一些日志来判断。

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.19

React16 Jest单元测试之 Setup and Teardown(重复设置或重复安装、一次设置或一次安装)

Mon, 07 Jul 2025 16:41:40 +0000

项目初始化【这里使用之前的项目，节省时间】

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.17

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.17
npm install

一般写单元测试的时候有时候需要在测试运行之前做一个操作，当测试运行完之后有时候也需要执行一些操作，Jest则提供了类似的帮助函数来处理这类问题

Repeating Setup For Many Tests 多次安装

如果在很多测试中需要重复进行某个操作，则可以使用beforeEach和afterEach，

如下，两个测试中都与城市数据进行交互。在每个测试之前调用一个方法initCityDatabase()，并且在每次测试之后调用clearCityDatabase()方法。

let citys = [];
let time = 1;
const isCity = (city) => {
 if (citys.indexOf(city) > -1) {
 return true;
 }
 return false;
};

const initCityDatabase = () => new Promise((resolve, reject) => {
 let promise;

 try {
 setTimeout(() => {
 if (time === 1) {
 citys.push('natasha1');
 time += 1;
 } else if (time === 2) {
 citys.push('natasha2');
 time += 1;
 }
 promise = resolve(citys);
 }, 1000);
 } catch (err) {
 return reject(err);
 }

 return promise;
});

const clearCityDatabase = () => new Promise((resolve, reject) => {
 let promise;
 try {
 setTimeout(() => {
 citys = [];
 promise = resolve(citys);
 }, 1000);
 } catch (err) {
 return reject(err);
 }

 return promise;
});

beforeEach(() => initCityDatabase());

afterEach(() => clearCityDatabase());

test('The city database has natasha1', () => {
 expect(isCity('natasha1')).toBeTruthy();
});

test('The city database has natasha2', () => {
 expect(isCity('natasha2')).toBeTruthy();
});

执行npm test会得到如下结果

> xx@xx test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS src/__tests__/jest_setup_each_moretime.test.js (5.115s)
 ● Console

 console.log src/__tests__/jest_setup_each_moretime.test.js:16
 moretime -> init time = 1
 console.log src/__tests__/jest_setup_each_moretime.test.js:37
 moretime -> clear time = 1
 console.log src/__tests__/jest_setup_each_moretime.test.js:16
 moretime -> init time = 2
 console.log src/__tests__/jest_setup_each_moretime.test.js:37
 moretime -> clear time = 2

 PASS src/__tests__/jest_async_callback.test.js
 PASS src/__tests__/jest_async_promise.test.js (6.436s)
 PASS src/__tests__/jest_async_await.test.js (6.433s)
 PASS src/__tests__/CheckboxWithLabelComponent.test.jsx
 PASS src/__tests__/sum.test.js
 PASS src/__tests__/jest_common.test.js

Test Suites: 7 passed, 7 total
Tests: 24 passed, 24 total
Snapshots: 0 total
Time: 8.91s
Ran all test suites.

从上面的例子可以看出有个地方不同

beforeEach(() => initCityDatabase());

afterEach(() => clearCityDatabase());

这里看不出我调用的函数是否进行了针对promise的操作，实际上上面的两行代码等于下面的几行代码

beforeEach(() => {
 return initCityDatabase();
});

afterEach(() => {
 return clearCityDatabase();
});

如果initCityDatabase和clearCityDatabase不是promise或者callback的函数完全可以直接调用不需要加return，这里是需要注意的地方，对于函数如果是callbacks方式的话，可以看前面的文章[React16 Jest单元测试之 Testing Asynchronous Code]了解，还可以看出initCityDatabase和clearCityDatabase的调用次数

One-Time Setup 一次安装

在某些情况下，只需要在文件的开头进行一次安装。当安装的逻辑是异步的时候，这可能会特别麻烦，所以不能直接进行内联。

Jest提供beforeAll和afterAll来处理这种情况。如下，如果initCityDatabase和clearCityDatabase都返回了promise，并且城市数据可以在测试之间重复使用，那么我们可以将我们的测试代码更改为：

let citys = [];
let time1 = 1;
let time2 = 1;
const isCity = (city) => {
 if (citys.indexOf(city) > -1) {
 return true;
 }
 return false;
};

const initCityDatabase = () => new Promise((resolve, reject) => {
 let promise;

 try {
 setTimeout(() => {
 console.log('onetime -> init time = ', time1);
 time1 += 1;
 citys.push('natasha1');
 citys.push('natasha2');
 promise = resolve(citys);
 }, 1000);
 } catch (err) {
 return reject(err);
 }

 return promise;
});

const clearCityDatabase = () => new Promise((resolve, reject) => {
 let promise;
 try {
 console.log('onetime -> clear time = ', time2);
 time2 += 1;
 setTimeout(() => {
 citys = [];
 promise = resolve(citys);
 }, 1000);
 } catch (err) {
 return reject(err);
 }

 return promise;
});

beforeAll(() => initCityDatabase());

afterAll(() => clearCityDatabase());

test('The city database has natasha1', () => {
 expect(isCity('natasha1')).toBeTruthy();
});

test('The city database has natasha2', () => {
 expect(isCity('natasha2')).toBeTruthy();
});

运行npm test得到类似如下结果

> webpack4_react16_reactrouter4 @1 .0 .0 test / Users / durban / nodejs / webpack - react - demo >
 jest--notify--watchman = false

PASS src / __tests__ / jest_setup_each_moretime.test.js(5.234 s)
PASS src / __tests__ / jest_async_await.test.js(6.518 s)
PASS src / __tests__ / jest_async_promise.test.js(6.546 s)
PASS src / __tests__ / CheckboxWithLabelComponent.test.jsx
PASS src / __tests__ / jest_common.test.js
PASS src / __tests__ / sum.test.js
PASS src / __tests__ / jest_setup_each_onetime.test.js● Console

console.log src / __tests__ / jest_setup_each_onetime.test.js: 16
onetime - > init time = 1
console.log src / __tests__ / jest_setup_each_onetime.test.js: 32
onetime - > clear time = 1

PASS src / __tests__ / jest_async_callback.test.js

Test Suites: 8 passed, 8 total
Tests: 26 passed, 26 total
Snapshots: 0 total
Time: 10.007 s
Ran all test suites.

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.18

React16 Jest单元测试之 Testing Asynchronous Code(Async/Await)

Mon, 07 Jul 2025 16:41:27 +0000

通常Javascript代码很多情况下是异步运行的，当代码异步运行的时候，Jest需要知道什么运行结束，然后进行下一个单元测试，Jest自身就有需要方法来处理这个。下面记录如下

项目初始化【这里还是之前的项目，省的在配置麻烦】

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.16

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.16
npm install

Async/Await

上篇文章分享了关于异步测试的，这里继续分享下使用Async/Await进行异步测试

使用Async/Await写测试只需要在写测试的时候在function前面加入async关键字就可以了，比如下面的测试

const fetchData = (err) => {
 const promise = new Promise((resolve, reject) => {
 if (err) {
 return reject('error');
 }

 return setTimeout(() => resolve('gowhich'), 3000);
 });
 return promise;
};

test('data的数据是"gowhich"', async () => {
 const data = await fetchData();
 expect(data).toBe('gowhich');
});

test('获取数据失败', async () => {
 try {
 await fetchData(true);
 } catch (err) {
 expect(err).toBe('error');
 }
});

也可以将async/await和.resolves或者.rejects结合来使用，如下

const fetchData = (err) => {
 const promise = new Promise((resolve, reject) => {
 if (err) {
 return reject('error');
 }

 return setTimeout(() => resolve('gowhich'), 3000);
 });
 return promise;
};

test('data的数据是"gowhich"', async () => {
 await expect(fetchData()).resolves.toBe('gowhich');
});

test('获取数据失败', async () => {
 await expect(fetchData(true)).rejects.toMatch('error');
});

执行npm test,得到的结果如下

> xx@xx test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS src/__tests__/jest_async_callback.test.js
 PASS src/__tests__/CheckboxWithLabelComponent.test.jsx
 PASS src/__tests__/jest_common.test.js
 PASS src/__tests__/sum.test.js
 PASS src/__tests__/jest_async_promise.test.js (6.718s)
 PASS src/__tests__/jest_async_await.test.js (8.424s)

Test Suites: 6 passed, 6 total
Tests: 22 passed, 22 total
Snapshots: 0 total
Time: 10.927s
Ran all test suites.

在这些情况下，async和await实际上只是与promises示例使用的相同逻辑的语法糖。

这些形式都不是特别优于其他形式，您可以在代码库或甚至单个文件中混合使用它们。

这取决于哪种风格可以让你的测试更简单。

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.17

React16 Jest单元测试之 Testing Asynchronous Code

Mon, 07 Jul 2025 16:41:24 +0000

项目初始化【这里还是之前的项目，省的在配置麻烦】

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.15

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.15
npm install

Callbacks

一般情况下，Javascript的异步模式是通过Callbacks进行的

比如有一个函数fetchData(callback)是用来获取数据的，获取完数据回调callback(data),这里测试的时候返回的数据是一个字符串"peanut butter"

默认情况下，一旦Jest测试到达执行结束，它就会完成测试。这意味着下面这个测试不会按预期工作：

function fetchData(callback) {
 setTimeout(() => {
 callback('peanut butter');
 }, 1000);
}

// Don't do this!
test('one section the data is peanut butter', () => {
 function callback(data) {
 console.log('one section data = ', data);
 expect(data).toBe('peanut butter');
 }

 fetchData(callback);
});

执行 npm test 得到如下结果

> xx@xx test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS src/__tests__/jest_async.test.js
 PASS src/__tests__/CheckboxWithLabelComponent.test.jsx
 PASS src/__tests__/jest_common.test.js
 PASS src/__tests__/sum.test.js

Test Suites: 4 passed, 4 total
Tests: 14 passed, 14 total
Snapshots: 0 total
Time: 2.376s, estimated 3s
Ran all test suites.

从上面可以看出并没有打印出我们console.log要输出的内容，问题在于，还有没有等到fetchData执行完，测试就已经完成了。

针对这个问题，有一种替代形式的测试可以解决这个问题。就是不要将测试放入带有空参数的函数中，而应使用称为done的单个参数。Jest将在完成测试之前等待完成回调。如下

function fetchData(callback) {
 setTimeout(() => {
 callback('peanut butter');
 }, 1000);
}

test('two section the data is peanut butter', (done) => {
 function callback(data) {
 console.log('two section data = ', data);
 expect(data).toBe('peanut butter');
 done();
 }

 fetchData(callback);
});

执行 npm test 得到如下结果

> xx@xx test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS src/__tests__/jest_async.test.js
 ● Console

 console.log src/__tests__/jest_async.test.js:19
 two section data = peanut butter

 PASS src/__tests__/CheckboxWithLabelComponent.test.jsx
 PASS src/__tests__/jest_common.test.js
 PASS src/__tests__/sum.test.js

Test Suites: 4 passed, 4 total
Tests: 14 passed, 14 total
Snapshots: 0 total
Time: 3.438s
Ran all test suites.

跟上一个对比的话多了如下的输出代码

● Console

 console.log src/__tests__/jest_async.test.js:19
 two section data = peanut butter

如果done()永远不会被调用，那么测试会失败。

Promises

如果代码里面使用Promises的话，有一个非常简单的方法来进行异步测试，只需要在测试中返回一个promise就可以了，Jest将等到promise调用resolve，如果promise是reject，则测试结果失败。如下例子，将callback的函数替换为promise的函数

const fetchData = (err) => {
 const promise = new Promise((resolve, reject) => {
 if (err) {
 return reject('error');
 }

 return setTimeout(() => resolve('peanut butter'), 3000);
 });
 return promise;
};

test('the data is peanut butter', () => {
 const promise = fetchData().then((data) => {
 // console.log('third section data = ', data);
 expect(data).toBe('peanut butter');
 });

 return promise;
});

test('the fetch fails with an error', () => {
 expect.assertions(1);
 const promise = fetchData(true).catch((err) => {
 expect(err).toMatch('error');
 });

 return promise;
});

一定要确定返回的是一个promise，不行Jest会在fetchData完成之前先完成。

如果期望promise是reject，使用.catch方法，确保添加了expect.assertions去验证产生了一定数量的assertions被调用，否则一个fulfilled promise的测试将会失败

.resolves / .rejects

除了上面简单的方法还可以在测试语句中使用.resolves / .rejects

.resolves matcher如下

test('the data is peanut butter', () => {
 const promise = expect(fetchData()).resolves.toBe('peanut butter');
 return promise;
});

.rejects matcher如下

test('the fetch fails with an error', () => {
 const promise = expect(fetchData(true)).rejects.toMatch('error');
 return promise;
});

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.16

React16 Jest单元测试之 Using Matchers

Mon, 07 Jul 2025 16:41:19 +0000

项目初始化【这里还是之前的项目，省的在配置麻烦】

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git

tag：v_1.0.14

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git

cd webpack4-react16-reactrouter-demo

git fetch origin

git checkout v_1.0.14

npm install

普通的Matchers

src/__tests__/jest_common.test.js

test('two plus two is four', () => {
 expect(2 + 2).toBe(4);
});

运行npm test

$ npm test

> xx@xx test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS src/__tests__/sum.test.js
 PASS src/__tests__/jest_common.test.js
 PASS src/__tests__/CheckboxWithLabelComponent.test.jsx

Test Suites: 3 passed, 3 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 2.963s
Ran all test suites.

在上面的代码中expect(2+2)返回了一个"expectation"对象，这些"expectation"对象除了调用matchers之外不会做太多其他的事情，上面代码中".toBe(4)“就是一个matchers.当jest运行时，他会捕获所有失败了的matchers,然后打印出比较友好的错误信息。

“toBe"使用Object.is去测试是否相等。如果想要检查对象的值是否相等，可以使用"toEqual"代替.

test('object assignment', () => {
 const data = {one: 1};
 data['two'] = 2;
 expect(data).toEqual({one: 1, two: 2});
});

toEqual会用递归的方式检查object或array每个值

也可以使用matchers的相反的方式进行测试

test('adding positive numbers is not zero', () => {
 for (let a = 1; a < 10; a += 1) {
 for (let b = 1; b < 10; b += 1) {
 expect(a + b).not.toBe(0);
 }
 }
});

在测试中有时候需要去判断"undefined”,“null"和"false"的区别，但是有时候又不想区分他们，Jest提供了帮助，从而实现测试中自己想要的情况

toBeNull只匹配 null
toBeUndefined只匹配 undefined
toBeDefined是跟toBeUndefined相反
toBeTruthy匹配任何if条件认为true的
toBeFalsy匹配任何if条件认为false的

比如下面

test('null', () => {
 const n = null;
 expect(n).toBeNull();
 expect(n).toBeDefined();
 expect(n).not.toBeUndefined();
 expect(n).not.toBeTruthy();
 expect(n).toBeFalsy();
});

test('zero', () => {
 const z = 0;
 expect(z).not.toBeNull();
 expect(z).toBeDefined();
 expect(z).not.toBeUndefined();
 expect(z).not.toBeTruthy();
 expect(z).toBeFalsy();
});

下面看看其他的一些matchers

Numbers

大多数数字的比较方法都有等价的Matchers。

test('two plus two', () => {
 const value = 2 + 2;
 expect(value).toBeGreaterThan(3);
 expect(value).toBeGreaterThanOrEqual(3.5);
 expect(value).toBeLessThan(5);
 expect(value).toBeLessThanOrEqual(4.5);

 // toBe and toEqual are equivalent for numbers
 expect(value).toBe(4);
 expect(value).toEqual(4);
});

对于浮点数，我们不希望出现四舍五入的错误情况，因此判断小数的是否相等的时候，使用"toBeCloseTo"代替"toEqual”，如下

test('adding floating point numbers', () => {
 const value = 0.1 + 0.2;
 expect(value).toBeCloseTo(0.3);
});

Strings

可以使用toMatch在正则表达式中检查字符串

test('there is no I in team', () => {
 expect('team').not.toMatch(/I/);
});

test('but there is a "stop" in Christoph', () => {
 expect('Christoph').toMatch(/stop/);
});

Arrays

可以使用toContain检查数组是否包含特定项目

const shoppingList = [
 'diapers',
 'kleenex',
 'trash bags',
 'paper towels',
 'beer',
];

test('the shopping list has beer on it', () => {
 expect(shoppingList).toContain('beer');
});

Exceptions

如果想测试某个特定函数在调用时会抛出错误，请使用toThrow

test('compiling android goes as expected', () => {
 function compileAndroidCode() {
 throw new Error('you are useing the wrong JDK');
 }

 expect(compileAndroidCode).toThrow();
 expect(compileAndroidCode).toThrow(Error);

 // 匹配错误信息
 expect(compileAndroidCode).toThrow('you are useing the wrong JDK');
 expect(compileAndroidCode).toThrow(/JDK/);
});

上面的全部测试案例测试结果如下

$ npm test

> xx@xx test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS src/__tests__/jest_common.test.js
 PASS src/__tests__/CheckboxWithLabelComponent.test.jsx
 PASS src/__tests__/sum.test.js

Test Suites: 3 passed, 3 total
Tests: 13 passed, 13 total
Snapshots: 0 total
Time: 2.752s
Ran all test suites.

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git

tag：v_1.0.15

React16 之测试单元(Jest+React+Enzyme)

Mon, 07 Jul 2025 16:41:15 +0000

安装 enzyme 相关

npm install enzyme enzyme-adapter-react-16 --save-dev

npm install jest babel-jest babel-preset-env react-test-renderer --save-dev

npm install enzyme-to-json

修改package.json

"test": "jest --notify --watchman=false",

这里强调记录下，为什么要加–watchman=false，因为在国内watchman连接的会会超时，别问我怎么知道的，我可以给你解释102个小时，反正在国内的话就按照我说的这个来，不然，你会和郁闷

分别添加jest.config.js和jest.setup.js

jest.config.js

module.exports = {
 setupFiles: ['./jest.setup.js'],
 snapshotSerializers: ['enzyme-to-json/serializer'],
};

jest.setup.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({
 adapter: new Adapter(),
});

为什么会有jest.setup.js，官网的是在测试文件中其实是可以直接加

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({
 adapter: new Adapter(),
});

这段代码的，但是为了不重复操作，有的人把这段代码提出来，放到一个单独的文件中，这个也是jest配置文件支持的，这点做的很好

测试用例

src/lib/sum.js

function sum(a, b) {
 return a + b;
}
module.exports = sum;

src/__tests__/sum.test.js

const sum = require('../lib/sum');

test('adds 1 + 2 to equal 3', () => {
 expect(sum(1, 2)).toBe(3);
});

执行jest进行测试

$ npm test

> xx@xx test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS src/__tests__/sum.test.js
 ✓ adds 1 + 2 to equal 3 (4ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.348s
Ran all test suites.

为什么要把测试案例放到目录tests

默认jest会扫描testMatch匹配的文件，而忽略testPathIgnorePatterns匹配的文件，具体的可在配置文件更改

testMatch: **/__tests__/**/*.js?(x),**/?(*.)+(spec|test).js?(x)
testPathIgnorePatterns: /node_modules/

React组件测试用例

src/components/CheckboxWithLabelComponent.jsx

import React from 'react';
import PropTypes from 'prop-types';

class CheckboxWithLabelComponent extends React.Component {
 constructor(props, context) {
 super(props, context);

 this.state = {
 isChecked: false,
 };

 this.onChange = this.onChange.bind(this);
 }

 onChange() {
 this.setState({
 isChecked: !this.state.isChecked,
 });
 }

 render() {
 return (
 <label htmlFor="label">
 <input
 type="checkbox"
 checked={this.state.isChecked}
 onChange={this.onChange}
 />
 {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
 </label>
 );
 }
}

CheckboxWithLabelComponent.propTypes = {
 labelOn: PropTypes.string.isRequired,
 labelOff: PropTypes.string.isRequired,
};

export default CheckboxWithLabelComponent;

src/__tests__/CheckboxWithLabelComponent.test.jsx

import React from 'react';
import { shallow } from 'enzyme';
import CheckboxWithLabelComponent from '../components/CheckboxWithLabelComponent';

test('CheckboxWithLabelComponent changes the text after click', () => {
 // Render a checkbox with label in the document
 const checkbox = shallow(<CheckboxWithLabelComponent labelOn="On" labelOff="Off" />);

 expect(checkbox.text()).toEqual('Off');

 checkbox.find('input').simulate('change');

 expect(checkbox.text()).toEqual('On');
});

执行jest进行测试

$ npm test

> xx@xx test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS src/__tests__/sum.test.js
 PASS src/__tests__/CheckboxWithLabelComponent.test.jsx

Test Suites: 2 passed, 2 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 2.188s
Ran all test suites.

是不是很赞。原来前端也可以这么牛逼。

.babelrc也别忘记修改

presets中添加"env"

"presets": [
 "es2015",
 "react",
 "stage-0",
 "env"
]

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.14

Webpack4+React16+ReactRouter4 - historyApiFallback 多级路由

Mon, 07 Jul 2025 15:48:44 +0000

之前的几篇文章写的很多，里面在开发环境下都用到了

historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
},

但是在我们开发也许会遇到一个很奇怪的问题就是，当我们访问到二级以上的路由的情况下，在刷新页面会发现页面加载不出需要的js,此时会显示一个404，说文件不存在，但是仔细看的话发现加载的js路径不对呀，正常来说js的加载是在/下面的,如、xxx.js，但是当我们访问到比如/topics/1的时候，js请求的路径就变成了/topics/xxx.js，这个问题根据经验来说应该是html-webpack-plugin的原因，因为它在帮我们加入js文件的时候应该给我们一个base的参数，但是我也没有找到类似这样的参数，或者其他配置可以解决这个问题，最终让我追溯到了webpack的配置中output的选项中，其中有个publicPath这个选项

文档中的意思是

该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀。因此，在多数情况下，此选项的值都会以/结束。

那么我们就来设置下

output: {
 filename: '[name].bundle.js',
 chunkFilename: '[chunkhash].bundle.js',
 path: path.resolve(__dirname, 'dist'),
},

中加入

publicPath: '/',

结果如下

output: {
 filename: '[name].bundle.js',
 chunkFilename: '[chunkhash].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 publicPath: '/',
},

保存后重启webpack-dev-server

npm start

然后再去刷新，发现问题得到了解决。在任何页面进行刷新就能保证正常的加载到js文件。

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.5

Webpack4+React16+ReactRouter4+Redux整合开发 - Redux Logger日志相关配置

Fri, 04 Jul 2025 14:27:37 +0000

之前的几篇文章继承了redux，这里不得不说下与redux开发相关的一些配置redux-logger，其实有很多，也有另外一种方式，这里我觉得这个是比较好的，这里做下记录，跟大家分享下。

首先clone代码

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git redux-devtools
cd redux-devtools
npm install 

npm start

然后安装redux-logger

npm install redux-logger

打开src/index.jsx
引入redux-logger

import { createLogger } from 'redux-logger';

更新修改代码结果如下

const middleware = [];
if (typeof __DEV__ !== 'undefined') {
 middleware.push(createLogger()); // 创建日志
}
// 为了添加多个中间件 我们重新改造middleware
middleware.push(routerMiddleware(history));

// 这行是DevTools的配置 后面做详细说明
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(...middleware)), // 中间件引入
);

日志一般是在开发环境中使用，我们需要加个变量来做下控制，这里通过修改webpack.config.js中的plugins加入

new webpack.DefinePlugin({
 'global.GENTLY': false,
 __DEV__: true,
})

配置完结果如下

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 entry: {
 app: [
 'webpack/hot/only-dev-server',
 'react-hot-loader/patch',
 './src/index.jsx',
 ],
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy', 'react-hot-loader/babel'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 alias: {
 Actions: path.resolve(__dirname, 'src/actions'),
 },
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 const {
 plugins,
 } = config;
 plugins.push(new webpack.DefinePlugin({
 'global.GENTLY': false,
 __DEV__: true,
 }));
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 devServer: {
 hot: true,
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
 },
 },
 plugins,
 });
}

module.exports = config;

重新执行

npm start

打开计数器，通过chrome的devtools可以看到类似如下图的日志，这样我们在做数据交互的时候就能清晰的了解到具体的数据调用情况

这里前提说下，Chrome浏览器最好是安装下redux的Chrome扩展，不知道的可自行百度或google下，后面的文章有需要的话，在详细说下。

实践项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git

tag:v_1.0.3

Webpack4+React16+ReactRouter4+Redux整合开发 - react-hot-loader

Fri, 04 Jul 2025 14:27:34 +0000

继续上篇文章【Webpack4+React16+ReactRouter4+Redux整合开发】继续分享，这里我们针对细节的部分做下优化，主要是能更加高效的提升我们的开发效率

1、clone 实例代码并将代码运行起来

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-hot-loader-demo && cd react-hot-loader-demo

npm install

2、运行项目

npm start

3、修改webpack.config.js

修改webpack-dev-server的配置，添加

hot: true

结果如下

devServer: {
 hot: true,
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
 },
},

修改entry

entry: {
 app: [
 'webpack/hot/only-dev-server', // 这里新加
 'react-hot-loader/patch', // 这里新加
 './src/index.jsx',
 ],
},

修改module中rule部分

{
 test: /\.(js|jsx)$/,
 loader: [
 'babel-loader',
 'react-hot-loader/webpack',
 ],
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
}

修改src/index.jsx
将原来的

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

替换为

const render = () => {
 ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <App history={history} />
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
 );
};

render();

if (module.hot) {
 module.hot.addStatusHandler((status) => {
 console.log('status = ', status);
 });

 module.hot.accept('./App', () => {
 // 这里是当前版本很重要的环节，不然的话react-hot-reload不起作用
 require('./App').default;
 render();
 });

 module.hot.accept('./reducers', () => {
 store.replaceReducer(connectRouter(history)(rootReducer));
 render();
 });
}

添加src/App.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { ConnectedRouter } from 'connected-react-router';
import routes from './routes';

const App = ({ history }) => (
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
);

App.propTypes = {
 history: PropTypes.objectOf(PropTypes.any).isRequired,
};

export default App;

最后一个package.json中start命令修改

"start": "npx webpack-dev-server --open --hot"

最后重启项目

npm start

试着改改UI，会有神奇的效果

实践环境具体版本以项目的package.json为准

os: mac
node: v8.9.4

项目地址
https://github.com/durban89/webpack4-react16-reactrouter-demo.git
TAG: v_1.0.2

Webpack4+React16+ReactRouter4+Redux整合开发

Fri, 04 Jul 2025 14:27:31 +0000

续接上文【Webpack4+React16+ReactRouter4整合开发】

拉取github代码
https://github.com/durban89/webpack4-react16-reactrouter-demo.git

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git webpack4-react16-reactrouter-redux
cd webpack4-react16-reactrouter-redux
npm install 
npm start

如果没有异常就可以正常写代码了

首先看下react-router-redux，从react-router官网的redux介绍部分可以看出写的是React Router Redux，但是点击后会告诉你Deprecated。我的天！废弃了，好吧，然后下面告诉你connected-react-router
我的天，又造了一个轮子，看来要重头学起了，没关系，咱们就是不怕折腾，人活着就是折腾嘛。
我们链接到connected-react-router，各种的炫耀夸，太多了，各种优点，我们还是来点实际的，操作开始

npm install redux react-redux history react-hot-loader connected-react-router --save

如何使用
修改src/index.jsx

1、第一步
添加第一部分 - 导入使用的库函数

import { AppContainer } from 'react-hot-loader';
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { Provider } from 'react-redux';
import { connectRouter, ConnectedRouter, routerMiddleware } from 'connected-react-router';

添加第二部分 - 需要自己去定义

import rootReducer from './reducers'; // 这里的文件是新加的 - 具体是如何创建的可以看下项目代码
import routes from './routes'; // 这里的文件是新加的 - 具体是如何创建的可以看下项目代码

添加第三部分 - 配置redux相关的逻辑

const history = createBrowserHistory();
const initialState = {};
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(routerMiddleware(history))),
);

添加第四部分 - 整合react-router

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

最终src/index.jsx内容如下

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { Provider } from 'react-redux';
import { connectRouter, ConnectedRouter, routerMiddleware } from 'connected-react-router';
import ReactDOM from 'react-dom';
import rootReducer from './reducers';
import routes from './routes';

const history = createBrowserHistory();
const initialState = {};
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(routerMiddleware(history))),
);

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

src/routes.jsx 主要配置路由跟组件的关系 -> 上面这行import routes from ‘./routes’;代码

import React from 'react';
import {
 BrowserRouter as Router,
 Route,
 Link as ALink,
} from 'react-router-dom';

import AppComponent from './components/AppComponent';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';
import TopicsComponent from './components/TopicsComponent';

const routes = (
 <div>
 <Router>
 <AppComponent>
 <ul>
 <li><ALink to="/">首页</ALink></li>
 <li><ALink to="/about">关于</ALink></li>
 <li><ALink to="/topics">论题</ALink></li>
 </ul>
 <hr />

 <Route exact path="/" component={HomeComponent} />
 <Route path="/about" component={AboutComponent} />
 <Route path="/topics" component={TopicsComponent} />
 </AppComponent>
 </Router>
 </div>
);

export default routes;

2、第二步
配置好了，就要开始使用了
1】、创建reducers
src/reducers/counter.js

const counterReducer = (state = 0, action) => {
 switch (action.type) {
 case 'INCREMENT':
 return state + 1;
 case 'DECREMENT':
 return state - 1;
 default:
 return state;
 }
};

export default counterReducer;

2】、将counter.js加入到主reducers里面

src/reducers/index.js // 这里的文件就是对应这段代码 import rootReducer from './reducers';
import { combineReducers } from 'redux';
import counterReducer from './counter';

export default combineReducers({
 count: counterReducer,
});

3】、创建actions


export const increment = () => ({
 type: 'INCREMENT',
});

export const decrement = () => ({
 type: 'DECREMENT',
});

4】、添加一个组件src/components/CounterComponent.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { counter } from 'Actions';

const {
 increment, decrement,
} = counter;

class CounterComponent extends Component {
 constructor(props, context) {
 super(props, context);

 this.state = {};
 }

 render() {
 const {
 count,
 } = this.props;

 return (
 <div>
 <p>数值: {count}</p>
 <button onClick={this.props.doIncrement}>+</button>
 <button onClick={this.props.doDecrement}>-</button>
 </div>
 );
 }
}

CounterComponent.propTypes = {
 count: PropTypes.number,
 doIncrement: PropTypes.func.isRequired,
 doDecrement: PropTypes.func.isRequired,
};

CounterComponent.defaultProps = {
 count: 0,
};

const mapStateToProps = state => ({
 count: state.count,
});

const mapDispatchToProps = dispatch => ({
 doIncrement: () => dispatch(increment()),
 doDecrement: () => dispatch(decrement()),
});

export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);

5】、将组件加到路由里面

src/routes.js

import React from 'react';
import {
 BrowserRouter as Router,
 Route,
 Link as ALink,
} from 'react-router-dom';

import AppComponent from './components/AppComponent';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';
import TopicsComponent from './components/TopicsComponent';
import CounterComponent from './components/CounterComponent';

const routes = (
 <div>
 <Router>
 <AppComponent>
 <ul>
 <li><ALink to="/">首页</ALink></li>
 <li><ALink to="/about">关于</ALink></li>
 <li><ALink to="/topics">论题</ALink></li>
 <li><ALink to="/counter">计数器</ALink></li>
 </ul>
 <hr />

 <Route exact path="/" component={HomeComponent} />
 <Route path="/about" component={AboutComponent} />
 <Route path="/topics" component={TopicsComponent} />
 <Route path="/counter" component={CounterComponent} />
 </AppComponent>
 </Router>
 </div>
);

export default routes;

6】、为了引入方便再加一个src/actions/index.js

import counter from './counter';

const actions = {
 counter,
};

export default actions;
export { counter };

到这里基本上就完工了，应该可以在页面看到计数器，并进行操作了

import { counter } from 'Actions';

这里是比较特殊的
这个要归功于webpack

resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 alias: {
 Actions: path.resolve(__dirname, 'src/actions'),
 },
},

这里我们加了这个配置，于是在引入的时候就会正常引入需要的代码了。

好了，整个配置就完成了，项目我已经上传到github了，需要的同学可以自行去下载查看

实例项目地址:

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.1

Webpack4+React16+ReactRouter4整合开发

Fri, 04 Jul 2025 14:27:27 +0000

这次分享的内容有部分是跟之前的文章【webpack4手动配置安装react开发】大概类似，不同的是这次我们要结合reactr-router进行开发

1、创建项目并安装

mkdir webpack4_react16_reactrouter && cd webpack4_react16_reactrouter

npm init -y

npm install react react-dom prop-types react-router-dom

npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin webpack-dev-server eslint eslint-plugin-html eslint-plugin-react babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import babel-core babel-loader babel-plugin-transform-strict-mode babel-plugin-transform-object-assign babel-plugin-transform-decorators-legacy babel-preset-es2015 babel-preset-react babel-preset-stage-0 style-loader css-loader url-loader --save-dev

react开发需要用到的
babel相关的是用来做es5/es6语法解析的
eslint相关的是用来做语言检查的

2、eslint和webpack相关配置
.eslintrc

{
 "env": {
 "browser": true,
 "node": true,
 "es6": true,
 "jquery": true
 },
 "parser": "babel-eslint",
 "plugins": [
 "react",
 "html"
 ],
 "extends": [
 "airbnb"
 ],
 "rules": {
 "no-underscore-dangle": 0
 }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 entry: {
 app: ['./src/index.jsx'],
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 devServer: {
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 },
 });
}

module.exports = config;

index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>React + ReactRouter Demo</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <div id="root"></div>
</body>
</html>

基本上整个目录结构就搭建完了。还是蛮繁琐的，但是自己了解了其中整个逻辑及流程，对自己是有意的，不过说不好未来就成体系了，直接调用就好了，比如现在的create-react-app，可以直接帮你创建一个项目，很不错的一个选择。
但是搭建一个符合自己需求的更有价值。
基本的都弄完了，接下来如何使用ReactRouter呢，先从入口文件开始
src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {
 BrowserRouter as Router,
 Route,
 Link as ALink,
} from 'react-router-dom';

import AppComponent from './components/AppComponent';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';
import TopicsComponent from './components/TopicsComponent';

ReactDOM.render(
 (
 <Router>
 <AppComponent>
 <ul>
 <li><ALink to="/">首页</ALink></li>
 <li><ALink to="/about">关于</ALink></li>
 <li><ALink to="/topics">论题</ALink></li>
 </ul>
 <hr />

 <Route exact path="/" component={HomeComponent} />
 <Route path="/about" component={AboutComponent} />
 <Route path="/topics" component={TopicsComponent} />
 </AppComponent>
 </Router>
 ),
 document.getElementById('root'),
);

基本上整个实例是参考了官网的实例，只是针对自己的需求做局部的调整，对于需要使用React开发的同学完全可以入手了，关于数据相关的后面再继续讨论。

这里有个很重要的点，就是在使用webpack-dev-server的使用，当你跳转到某个路由的时候，再刷新会发现页面提示找不到，这个问题这里介绍一个解决方案
historyApiFallback
只需要在webpack.config.js中配置下

historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
},

最终的文件结构如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 entry: {
 app: ['./src/index.jsx'],
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 devServer: {
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
 },
 },
 });
}

module.exports = config;

在运行npm start，修改代码试试，这里强调下版本，如果你的版本比我的新的话，要自己去看下官网的api是否有调整

实例环境，拉取github代码，看package.json，一切尽在你掌握之中
实例项目地址:

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.0

webpack4手动配置安装react开发

Fri, 04 Jul 2025 14:27:21 +0000

截止目前，以前都是在使用webpack打包react来进行开发，为了跟随技术的步伐，今天来折腾下新版本的新用法

实践环境

webpack: 4.9.1
react: 16.4.0

1、创建项目并安装

mkdir webpack4_react16_reactrouter && cd webpack4_react16_reactrouter

npm init -y

npm install react react-dom prop-types

npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin webpack-dev-server eslint eslint-plugin-html eslint-plugin-react babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import babel-core babel-loader babel-plugin-transform-strict-mode babel-plugin-transform-object-assign babel-plugin-transform-decorators-legacy babel-preset-es2015 babel-preset-react babel-preset-stage-0 style-loader css-loader url-loader --save-dev

react开发需要用到的
babel相关的是用来做es5/es6语法解析的
eslint相关的是用来做语言检查的

2、eslint、babel和webpack相关配置

.eslintrc

{
 "env": {
 "browser": true,
 "node": true,
 "es6": true,
 "jquery": true
 },
 "parser": "babel-eslint",
 "plugins": [
 "react",
 "html"
 ],
 "extends": [
 "airbnb"
 ],
 "rules": {
 "no-underscore-dangle": 0
 }
}

.babelrc // 这个文件可以不用加暂时不起作用

{
 "plugins": [
 "transform-es2015-modules-commonjs"
 ]
}

修改webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 mode: 'production',
 entry: {
 app: ['./src/index.jsx'],
 },
 devServer: {
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [
 {
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 });
}

module.exports = config;

下面来修改index.js，修改index.js为index.jsx
src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import AppComponent from './components/AppComponent';

ReactDOM.render(
 (<AppComponent>React Demo</AppComponent>),
 document.getElementById('root'),
);

添加src/components/AppComponent.jsx

import React from 'react';
import PropTypes from 'prop-types';

class AppComponent extends React.Component {
 constructor(props, context) {
 super(props, context);

 this.state = {};
 }

 render() {
 return (
 <div>{this.props.children}</div>
 );
 }
}

AppComponent.propTypes = {
 children: PropTypes.node.isRequired,
};

export default AppComponent;

修改index.html，这个只是作为一个模板来使用，具体的后期复杂逻辑，以后的文章分享

<!doctype html>
<html>
 <head>
 <title></title>
 </head>
 <body>
 <div id="root"></div>
 </body>
</html>

项目目录最终的结构

├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── components
│ │ └── AppComponent.jsx
│ ├── data.xml
│ ├── demo-image.png
│ ├── font.woff2
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ ├── glyphicons-halflings-regular.woff2
│ ├── index.css
│ ├── index.jsx
│ └── print.js
└── webpack.config.js

运行开发环境的命令

npm run start

执行后，会看到页面展示React Demo，代表我们的程序加好了，之后可以直接进行相关的开发

npm run build // 打包

npm run build:package // 压缩打包

上面两个都会直接生成dist文件夹，然后里面会生成需要部署的所有文件

项目地址

https://github.com/durban89/webpack4-react16-demo.git

里面有很多细节是在本博客没有的，可以自己看下，不懂的可以加群交流。

ReactJS中上传图片到qiniu(2017-05-10更新)

Thu, 03 Jul 2025 17:11:26 +0000

之前有写过类似的一篇文章，有位同学突然找来解惑，发现自己采用了另外的一个方法，这里也分享下，希望对使用reactjs的同学有帮助。

逻辑思路是这样子的，在componentDidMount中实现更新dom的操作，异步加载需要的资源文件，然后在加载完后实现qiniu的初始化操作。这里就不需要在webpack或者其他打包工具中去引入qiniu的包文件，导致打完包的文件过大了。

我这里使用了nodejs的库scriptjs，

const $S = require('scriptjs');

可以实现异步的加载文件，当然你也可以使用你认为更好的，当然也别忘记告诉我下。以下为代码实现部分：

async componentDidMount() {

 let uploadToken = await this.getUploadToken();

 $S([
 'https://dn-kdjz.qbox.me/js/plupload/2.1.1/plupload.full.min.js',
 'https://dn-kdjz.qbox.me/js/qiniu-js-sdk/1.0.17.2/qiniu.min.js'
 ], 'uploadBundle');

 $S.ready('uploadBundle', () => {

 // 证件合影
 let options1 = {
 runtimes: 'html5,flash,html4',
 browse_button: 'photoId',
 uptoken: uploadToken,
 get_new_uptoken: false,
 domain: 'https://xxxx.xxxxxx', // bucket域名，下载资源时用到，必需
 container: 'photoIdContainer', // 上传区域DOM ID，默认是browser_button的父元素
 max_file_size: '100mb', // 最大文件体积限制
 flash_swf_url: '/js/plupload/2.2.1/Moxie.swf', //引入flash，相对路径
 max_retries: 3, // 上传失败最大重试次数
 dragdrop: true, // 开启可拖曳上传
 drop_element: 'photoIdContainer', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
 chunk_size: '4mb', // 分块上传时，每块的体积
 auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
 init: {
 'FilesAdded': (up, files) => {
 plupload.each(files, function(file) {
 // 文件添加进队列后，处理相关的事情
 });
 },
 'BeforeUpload': (up, file) => {
 // 每个文件上传前，处理相关的事情
 },
 'UploadProgress': (up, file) => {
 // 每个文件上传时，处理相关的事情
 },
 'FileUploaded': async(up, file, info) => {
 // 查看简单反馈
 let domain = up.getOption('domain');
 let res = JSON.parse(info);
 let sourceLink = await this.getDownloadUrl(res.key);
 this.setState({
 photoIdKey: res.key,
 photoId: sourceLink
 })
 },
 'Error': (up, err, errTip) => {
 //上传出错时，处理相关的事情
 console.log(err);
 },
 'UploadComplete': () => {
 //队列文件处理完毕后，处理相关的事情
 console.log('上传完成');
 },
 'Key': (up, file) => {
 let timestamp = parseInt((new Date().valueOf() / 1000));
 // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
 // 该配置必须要在unique_names: false，save_key: false时才生效
 let key = `idcard/${timestamp}_${file.name}`;
 return key
 }
 }
 };
 // 第一个按钮
 const uploader1 = Qiniu.uploader(options1);
 })
}

这里有个getUploadToken方法，这个方法是根据官方文档的策略实现了一个获取上传token的方法，此方法是通过访问服务端的接口来获取token。具体实现过程可以参考官方，不明白的也可以加群讨论。

ReactJS 在 Browser 环境下是如何开发的

Thu, 03 Jul 2025 11:08:00 +0000

以前使用reactjs做前端开发都是webpack打包然后在运行，这样的好处是，你开发的环境是一个纯碎在写nodejs的感觉，而且还能应用很多ES6的新特性，岂不快哉！

最近在做后端，也由于使用webpack时间长，一直没有找到很好的办法去解决，自动打包缓慢的问题，还有就是每次开发你都要去根据具体情况写要给跟webpack相关的config文件。

于是就试着用Browser的环境进行开发，结果今天尝试下后，果然还是很不错的。

首先引入react，我这里使用reflux，然后再引入reflux，再引入babel。

<script src="/js/react.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/reflux.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.10.3/babel.min.js"></script>

类似下面这样，跟使用jquery是一样的感觉。

接下来我们写一个简单的分页的组件。

var Pagination = React.createClass({
 clickHandler: function (e) {
 e.preventDefault();
 if (e.currentTarget.dataset.handle == 'false') {
 this.props.listData(e.currentTarget.dataset.page);
 }
 },
 render: function () {
 let nextStop = false;
 let preStop = false;
 if (this.props.currentdata.length < this.props.pagesize) {
 nextStop = true;
 }

 if ((this.props.page - 1) <= 0) {
 preStop = true;
 }

 const preClass = preStop ? 'previous disabled' : 'previous';
 const nextClass = nextStop ? 'next disabled' : 'next';

 let pre_page = parseInt(this.props.page) - 1;
 let next_page = parseInt(this.props.page) + 1;

 return (
 <nav>
 <ul className="pager">
 <li className={preClass}>
 <a href="#" onClick={this.clickHandler} data-page={pre_page} data-handle={preStop}>
 上一页
 </a>
 </li>
 <li className={nextClass}>
 <a href="#" onClick={this.clickHandler} data-page={next_page} data-handle={nextStop}>
 下一页
 </a>
 </li>
 </ul>
 </nav>
 );
 }
});

Pagination.propTypes = {
 currentdata: React.PropTypes.array.isRequired,
 page: React.PropTypes.number.isRequired,
 pagesize: React.PropTypes.number.isRequired,
 listData: React.PropTypes.func.isRequired
};

就是这样，不需要其他的 export的东西，以为我们只要在页面中引入就可以了。

<script src='/js/components/partial/Pagination.js' type="text/babel"></script>

就像上面这样就可以了。

下面我们调用一下：

var pagerProps = {
 page: this.state.page,
 pagesize: this.state.pageSize,
 currentdata: this.state.recordItem,
 listData: this.loadMorePage
};

这里的loadMorePage是另外组件里面的一个方法，用来加载下一页数据的，page就是页数，pageSize就是每页的数量。

loadMorePage:function(page){
 page = parseInt(page);
 this.setState({page: page});
 Action.getRecordItem(this.props.uid, page, this.state.pageSize);
},

就像上面这样子，加载一下数据就可以渲染到列表的组件里面去了。然后就是如何再其他组件里面调用了。

<div className="col-md-12">
 <Pagination {...pagerProps}/>
</div>

pagerProp就是刚才上面的变量。这样就可以使用了。

总体感觉下来起始跟我之前的使用方法区别就是，不再需要去import和export了。

而且不需要去不断的打包了。不知道后面开发还会遇到啥其他问题，继续更新…

ReactJS 0.14 mocha组件单元测试（二）

Wed, 02 Jul 2025 16:01:18 +0000

使用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 (
 <div className='container'>
 <div className='row'>
 Some state changes:
 {number}
 <p>Item Length : {item.length}</p>
 <p>Request Item State:{!isFetching ? '已完成' : '获取中'}</p>
 </div>
 <div className='btn-group'>
 <button className='btn btn-primary btn-xs' 
 onClick={() => increase(1)}>Increase</button>
 <button className='btn btn-primary btn-xs' 
 onClick={() => decrease(1)}>Decrease</button>
 <button className='btn btn-primary btn-xs' 
 onClick={() => fetchItems(item)}>FetchItems</button>
 </div>
 </div>
 )
 }

 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(
 <Provider store={store}>
 <Home />
 </Provider>
 );

 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.js

index.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组件单元测试（一）。

ReactJS 0.14 mocha组件单元测试（一）

Wed, 02 Jul 2025 16:01:14 +0000

先来一个简单的小组件：

import React, { Component } from 'react'


class Bar extends Component {
 render() {
 return (
 <div className='bar'>
 <h5>And I am Bar!</h5>
 </div>
 );
 }
}

export default Bar;

好了，到这里就足够了，来看看测试如何写：

import React from 'react';
import expect from 'expect';
import TestUtils from 'react-addons-test-utils';
import Bar from '../../app/js/components/test/Bar';

describe('Bar components', () => {
 before('render and locate element ', function() {
 const renderedComponent = TestUtils.renderIntoDocument(
 <Bar/>
 );

 const bar = TestUtils.findRenderedDOMComponentWithClass(
 renderedComponent,
 'bar'
 );

 this.bar = bar;
 });

 it('bar should exist', function() {
 expect(this.bar).toExist();
 });

 it('bar should be closed', function() {
 expect(this.bar.getAttribute('class')).toBe('bar');
 });
})

在运行前，做个简单的配置：

package.json

在scripts中添加

"test": "NODE_PATH=./app/js/lib ./node_modules/mocha/bin/mocha --compilers js:babel-register --recursive --require ./test/setup.js",
"test:watch": "npm test -- --watch"

添加NODE_PATH的原因是我要加载自己的lib库，不然在执行mocha的时候，会因为某些组建中调用了自己的库，而导致找不到对一个恩lib而报错。

这里还添加了一个setup.js,这个主要是为了解决类似window这类的问题，毕竟react渲染是需要dom的嘛。

setup.js代码如下：

import { jsdom } from 'jsdom';

global.document = jsdom('<!doctype html><html><body></body></html>')
global.window = document.defaultView
global.navigator = global.window.navigator

分享react-router实例

Wed, 02 Jul 2025 16:01:10 +0000

终于搞了一个大大的router：

ReactDOM.render((
 <Router history={browserHistory}>
 <Route path='/' component={PanelContainer} onEnter={Public.reactCheckLogin}>
 <IndexRoute component={DiagramListShow} />
 <Route path='panel/dataShow' component={DiagramListShow}/>
 <Route path='panel/diagramShow' component={DiagramShow}>
 <IndexRoute component={ApiDiagram}/>
 <Route path='apisum' component={ApiDiagram}/>
 <Route path='opensum' component={ OpenSum }/>
 <Route path='dayregister' component={ DayRegister }/>
 <Route path='activitysum' component={ ActivitySum }/>
 <Route path='recordsum' component={ RecordSum }/>
 <Route path='startsum' component={ StartSum }/>
 <Route path='downloadsum' component={ DownloadSum }/>
 <Route path='recordmoney' component={ RecordMoney }/>
 <Route path='recordnotice' component={ RecordNotice }/>
 <Route path='recordmulticurrency' component={ RecordMultiCurrency }/>
 <Route path='financeClickSum' component={ FinanceClickSum }/>
 <Route path='*' component={NoMatch}/>
 </Route>
 </Route>
 <Route path='/user' component={Container} onEnter={Public.reactCheckLogin}>
 <Route path='userinfo' component={UserInfo}/>
 </Route>
 <Route path='/manager' component={Container} onEnter={Public.reactCheckLogin}>
 <Route path='taskManage' component={TaskManage}/>
 <Route path='sqlManage' component={SqlManage}/>
 <Route path='oauthManage' component={oauthManage} />
 </Route>
 <Route path='/operation' component={Container} onEnter={Public.reactCheckLogin}>
 <Route path='typeinfo' component={Typeinfo}/>
 <Route path='listinfo' component={Listinfo}/>
 <Route path='financeNotice' component={FinanceNotice}/>
 </Route>
 <Route path='/panel/login' component={LoginRender} />
 </Router>
), document.getElementById('main-content'));

整理完后，感觉整个网站清晰多了.

这里有几个两点，一点是终于有办法可以判断进入某个路由的时候是否登录了。第二个两点是，之前的版本是在url后面添加hash，看起来很乱，这个版本的更新，从url上你完全看不出这个是用hash实现的。

Koa+React实现form表单上传文件

Wed, 02 Jul 2025 16:00:49 +0000

在nodejs里面通过html的表单上传图片，跟php比较起来还是麻烦一些，特别是在react中使用表单提交含有文件的数据。

最近也在做这个操作，找了很多资料，一直都是有个co-busboy这个，其实它也是基于busboy去封装的，不过这个更适合在koa里面使用。

以往的表单提交，我们用浏览器去debug的时候，会看到，提交了一个post提交的数据，这个一般只是值的提交，不包括有文件，但是在react中，

好像就更加复杂了一些，对于表单提交要单独自己写一个提交的事件去处理，累死submit这样的jquey函数。

而且提交成功后，我们用chrome去debug的时候，会发现提交的是一个Request Payload这样的，跟Form Data不一样，而且我们在koa中，

用body也是获取不到对应的值的，一切都是繁琐加着繁琐，自己考虑一下，像php这样的，是人家都帮你做好了，用起来很顺手，最终需要解决的就是，

如果把提交的data从header中去解析出来，其实busboy做的还是很好的。下面我大概说下我是如何去操作的。

web使用的jquery，通过FormData

在componentDidMount方法中初始化一下submit。

let handleAction = this.props.handleAction;
$("#BackgroundForm").submit(function(e){
 let formData = new FormData($(this)[0]);
 $.ajax({
 url:'/theapp/upload/background',
 data:formData,
 dataType:'json',
 type:'post',
 cache: false,
 contentType: false,
 processData: false,
 beforeSend:function(){
 $('#submitButton').attr('disabled',true);
 },
 success:function(data){
 if(data.success == true){
 handleAction(true);
 $('#errorContainer').html('').hide();
 }else if(data.success == false){
 let message = '<ul><li>'+data.message+'!</li></ul>';
 $('#errorContainer').html(message).show();
 $('#submitButton').attr('disabled',false);
 }
 },error:function(err){
 console.log(err);
 }
 });
 return false;
});

在server中的操作是这样的

const upload = function (ctx, key, streamName) {
 return new Promise(function (resolve, reject) {
 ctx.qiniuClient.upload(fs.createReadStream(streamName), key, function (err, result) {
 if (err) {
 return reject(err);
 }
 resolve(result);
 });
 });
};
theapp.post('/upload/background', co.wrap(function *(ctx, next) {
 let parts = parse(ctx.req);
 let part;
 //初始化数据
 let title = '';
 let theme = '';
 let theorder = '';
 let token = '';
 let big_url;
 let thumb_url;
 //获取form-data提交的数据
 while (part = yield parts) {
 if (Array.isArray(part)) {
 let name = part[0];
 let value = part[1];
 if (name == 'title') {
 title = value;
 }
 if (name == 'theme') {
 theme = value;
 }
 if (name == 'theorder') {
 theorder = value;
 }
 if (name == 'access_token') {
 token = value;
 }
 } else {
 let streamName = '/tmp/' + Math.random();
 let stream = fs.createWriteStream(streamName);
 part.pipe(stream);
 if (part.fieldname == 'big_url') {
 big_url = streamName;
 }
 if (part.fieldname == 'thumb_url') {
 thumb_url = streamName;
 }
 }
 }
 if (!big_url) {
 throw new Error('请上传背景大图');
 }
 if (!thumb_url) {
 throw new Error('请上传背景小图');
 }
 if (!title) {
 fs.unlinkSync(big_url);
 fs.unlinkSync(thumb_url);
 throw new Error('名称不能为空');
 }
 if (!theme) {
 fs.unlinkSync(big_url);
 fs.unlinkSync(thumb_url);
 throw new Error('主题不能为空');
 }
 if (!theorder) {
 theorder = 0;
 }
 //名称判断存在
 const url = ctx.config.hostDomain + '/admin/query';
 const sql = `SELECT * FROM qeeniao.app_dft_background WHERE title = '${title}'`;
 const options = {
 timeout: ctx.config.httpTimeout,
 method: 'POST',
 data: {'sql': sql, 'access_token': token}
 };
 const requestData = yield urllib.request(url, options);
 let data = requestData.data.toString();
 data = JSON.parse(data);
 if (data.length > 0) {
 fs.unlinkSync(big_url);
 fs.unlinkSync(thumb_url);
 throw new Error('名称已经存在');
 }
 //上传图片
 let big_res = yield upload(ctx, {
 'key': 'image/background/hd/' + title + '.jpg'
 }, big_url);
 big_url = big_res['url'];
 let thumb_res = yield upload(ctx, {
 'key': 'image/background/thumbnail/' + title + '.jpg'
 }, thumb_url);
 thumb_url = thumb_res['url'];
 //提交数据库
 let postData = {
 'title': title,
 'theme': theme,
 'theorder': theorder,
 'big_url': big_url,
 'thumb_url': thumb_url,
 'access_token': token
 };
 let postUrl = ctx.config.hostDomain + '/admin/add/background';
 let postoptions = {
 timeout: ctx.config.httpTimeout,
 method: 'POST',
 data: postData
 };
 let postRes = yield urllib.request(postUrl, postoptions);
 postRes = postRes.data.toString();
 postRes = JSON.parse(postRes);
 ctx.body = postRes;
}));

这里使用了一个qn的库

在启动的时候我把他加入了context中

app.context.qiniuClient = qn.create({
 accessKey: "Your accessKey",
 secretKey: "Your secretKey",
 bucket: "Your bucket",
 origin: 'Your origin'
});

这样处理起来就没问题了，其实要是如果koa把busboy自己封装起来是最好的。

React中上传图片到qiniu

Wed, 02 Jul 2025 16:00:46 +0000

在React中使用qiniu上传图片，实现方式有很多种，一种是在web端实现上传，一种是在server端实现上传

这里我说下我是如何在web端实现上传图片到七牛的

七牛的官方已经有了javascript的使用说明我这里就不重复了。

使用React首先是要把qiniu提供的js引入，由于我这里是使用的webpack，所以我就直接放在了引入文件中，

这样我就可以全局引用了。

require('./qiniu.js');

在组件中把qiniu的对象引入进来

const Qiniu = require('qiniu');

然后在componentDidMount这个方法中去初始化

//七牛上传大图
let uploader = Qiniu.uploader({
 runtimes: 'html5,flash,html4',
 browse_button: 'pickfiles',
 uptoken : this.props.uptoken,
 domain: 'http://7u2r0u.com2.z0.glb.qiniucdn.com/',//这里换成自己的
 container: 'app-background-container',
 max_file_size: '100mb',
 flash_swf_url: 'https://cdn.bootcss.com/plupload/2.1.7/Moxie.swf',
 max_retries: 3,
 dragdrop: true,
 drop_element: 'app-background-container',
 chunk_size: '4mb',
 auto_start: true,
 init: {
 'FilesAdded': function(up, files) {
 console.log('上传 FilesAdded');
 plupload.each(files, function(file) {
 // 文件添加进队列后,处理相关的事情
 console.log(file);
 });
 },
 'BeforeUpload': function(up, file) {
 // 每个文件上传前,处理相关的事情
 console.log('上传 Before Upload');
 console.log(up);
 console.log(file);
 $('#app-background-container .showpick').hide();
 $('#big_url').val('');
 },
 'UploadProgress': function(up, file) {
 console.log('上传 UploadProgress');
 console.log(up);
 console.log(file);
 },
 'FileUploaded': function(up, file, info) {
 console.log('====上传完成====');
 let domain = up.getOption('domain');
 let res = JSON.parse(info);
 let sourceLink = domain + res.key;
 console.log(sourceLink);
 $('#app-background-container .showpick').attr('href',sourceLink);
 $('#app-background-container .showpick img').attr('src',sourceLink);
 $('#big_url').val(sourceLink);
 $('#app-background-container .showpick').show();
 },
 'Error': function(up, err, errTip) {
 //上传出错时,处理相关的事情
 console.log('====上传失败====');
 console.log(err);
 console.log(errTip);
 },
 'UploadComplete': function() {
 console.log('====上传完毕====');
 }
 }
});

在render中需要把

<a className="btn btn-default btn-primary" id="pickfiles" href="#">
 <i className="glyphicon glyphicon-plus"> </i>
 <span>上传背景大图</span>
</a>

放进去，一定要注意id的值

千万别忘记了plupload这个插件，自己去google下就可以找到的，因为我把这个plupload做为一个externals，

所以在webpack的config中加入了

externals:{
 'moment': true,
 'jquery':'jQuery',
 'plupload':true,//重点在这里
 'format':true,
 'bootstrap':true,
 'fancybox':true,
 'co':true,
 '_':'lodash',
 'async':true,
 'datetimepicker':true,
 'selectpicker':true,
 'sweetalert':true,
 'highcharts':'Highcharts',
 'director':'Router'
},

ReactJS innerHtml 赋值操作

Wed, 02 Jul 2025 16:00:30 +0000

使用react的时候，总有一些变量是html的字符串，但是我们却想要实现innerHtml的类似方法，直接用html进行渲染。

这里react提供了一个dangerouslySetInnerHTML方法，可以实现此赋值操作。具体详情可以自己去google一个下，关键字：‘react dangerouslySetInnerHTML’.

下面是我为记录的一个示例，可以作为一个简单的demo了。

const Login = React.createClass({
 getInitialState: function () {
 return {
 'error_state': false,
 'error_message': ''
 }
 },
 handleClick:function(){
 let error_message = '';
 error_message += '<li>错误信息一</li>';
 error_message += '<li>错误信息二</li>';
 error_message += '<li>错误信息三</li>';
 this.setState({
 'error_state': true,
 'error_message': error_message
 });
 },
 render:function(){
 let alert_class = this.state.error_state ? 'alert alert-danger' : 'aler hidden';
 return (
 <div>
 <button onClick={this.handleClick}>添加html</button>
 <div className={alert_class} dangerouslySetInnerHTML={{__html:this.state.error_message}} ></div>
 </div>
 );
 }
});

ReactJS 实现代码高亮

Wed, 02 Jul 2025 15:40:51 +0000

使用插件google的prettify和jquery的format 完成了一套很完美的代码高亮显示，还能自动格式化。

先说jquery.format的接入【我这里开发是用的webpack】

在引入文件中使用reqiure方法，把jquery.format加入到js代码中。

require('./jquery.format.js');

jquery.format.js 这个文件我放在了与引入文件同级的目录下

就可以样就可以了。

在说引入prettify到react中，这个当然是在html页面中进行的了，所以在html中引入

<script src="https://cdn.bootcss.com/prettify/r298/prettify.min.js?skin=sunburst"></script>
<script src="https://cdn.bootcss.com/prettify/r298/lang-sql.min.js?skin=sunburst"></script>

就这样就可以了。

然后把我们需要的高亮代码的css也加入进来吧

pre .str, code .str { color: #65B042; } /* string - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
pre.prettyprint, code.prettyprint {
 background-color: #000;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -o-border-radius: 8px;
 -ms-border-radius: 8px;
 -khtml-border-radius: 8px;
 border-radius: 8px;
}
pre.prettyprint {
 width: 95%;
 margin: 0.2em auto;
 padding: 1em;
 white-space: pre-wrap;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }
@media print {
 pre .str, code .str { color: #060; }
 pre .kwd, code .kwd { color: #006; font-weight: bold; }
 pre .com, code .com { color: #600; font-style: italic; }
 pre .typ, code .typ { color: #404; font-weight: bold; }
 pre .lit, code .lit { color: #044; }
 pre .pun, code .pun { color: #440; }
 pre .pln, code .pln { color: #000; }
 pre .tag, code .tag { color: #006; font-weight: bold; }
 pre .atn, code .atn { color: #404; }
 pre .atv, code .atv { color: #060; }
}

最后看下react里面是如何操作的

在render方法里面操作，稍微有点基础知识的肯定都知道的。

 render:function(){
 if(this.props.data.length > 0){
 return (
 <table className="table table-striped table-bordered table-hover table-responsive">
 <thead>
 <colgroup>
 <col width="5%"></col>
 <col></col>
 <col width="20%"></col>
 <col width="20%"></col>
 <col width="10%"></col>
 </colgroup>
 <tr>
 <th>ID号</th>
 <th>SQL Template</th>
 <th>参数</th>
 <th>备注</th>
 <th>创建日期</th>
 </tr>
 </thead>
 <tbody id="itemContainer">
 {this.props.data.map(function(i){
 let ctime = moment.unix(i.ctime).format('YYYY-MM-DD');
 let template = $.format(i.template, {'method':'sql'});
 let config = $.format(i.config, {'method':'json'});
 return (
 <tr key={i.autokid}>
 <td>{i.autokid}</td>
 <td style={{'wordWrap':'break-word','wordBreak':'break-all','verticalAlign':'top'}} >
 <pre className="prettyprint">
 <code className="language-sql">{template}</code>
 </pre>
 </td>
 <td style={{'verticalAlign':'top'}}>
 <pre className="prettyprint">
 <code className="language-js">{config}</code>
 </pre>
 </td>
 <td style={{'verticalAlign':'top'}}>{i.comment} bezhu de qing</td>
 <td style={{'verticalAlign':'top'}}>{ctime}</td>
 </tr>
 );
 })}
 </tbody>
 </table>
 );
 }else{
 return <Loading type='spinning-bubbles' color='#e3e3e3'/>;
 }
 }

最后为了是的pretty的效果产生我们还要进行一个启动的操作

componentDidMount(){
 prettyPrint();
},
componentDidUpdate(){
 prettyPrint();
},

可以了，就是这样的。

ReactJS Prop 验证

Wed, 02 Jul 2025 15:40:39 +0000

本文主要是引入官方的使用，如果此时间较晚，可到官方查看较新使用说明：

React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 propTypes。下面用例子来说明不同验证器的区别：

React.createClass({
 propTypes: {
 // 可以声明 prop 为指定的 JS 基本类型。默认
 // 情况下，这些 prop 都是可传可不传的。
 optionalArray: React.PropTypes.array,
 optionalBool: React.PropTypes.bool,
 optionalFunc: React.PropTypes.func,
 optionalNumber: React.PropTypes.number,
 optionalObject: React.PropTypes.object,
 optionalString: React.PropTypes.string,

 // 所有可以被渲染的对象：数字，
 // 字符串，DOM 元素或包含这些类型的数组。
 optionalNode: React.PropTypes.node,

 // React 元素
 optionalElement: React.PropTypes.element,

 // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
 optionalMessage: React.PropTypes.instanceOf(Message),

 // 用 enum 来限制 prop 只接受指定的值。
 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

 // 指定的多个对象类型中的一个
 optionalUnion: React.PropTypes.oneOfType([
 React.PropTypes.string,
 React.PropTypes.number,
 React.PropTypes.instanceOf(Message)
 ]),

 // 指定类型组成的数组
 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

 // 指定类型的属性构成的对象
 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

 // 特定形状参数的对象
 optionalObjectWithShape: React.PropTypes.shape({
 color: React.PropTypes.string,
 fontSize: React.PropTypes.number
 }),

 // 以后任意类型加上 `isRequired` 来使 prop 不可空。
 requiredFunc: React.PropTypes.func.isRequired,

 // 不可空的任意类型
 requiredAny: React.PropTypes.any.isRequired,

 // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
 // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
 customProp: function(props, propName, componentName) {
 if (!/matchme/.test(props[propName])) {
 return new Error('Validation failed!');
 }
 }
 },
 /* ... */});

分享React表单提交获取值的方式

Tue, 01 Jul 2025 15:04:08 +0000

很奇怪的，这个是要去自己发现的，我也是在摸索中发现的，其实React的使用，只有你发现了，才觉得好玩，最近的Reflux就是这样子的。

##表单提交部分

handleSubmit:function(e){
 e.preventDefault();
 var params = {};
 var keys = React.findDOMNode(this.refs.keys).value.trim();
 var days = React.findDOMNode(this.refs.days).value.trim();
 var num = React.findDOMNode(this.refs.num).value.trim();
 var startDate = React.findDOMNode(this.refs.from_date).value.trim();
 var endDate = React.findDOMNode(this.refs.to_date).value.trim();
 //这部分是我自己发现的，哈哈
 var regStyle = $('.regStyle')[0].value;
 var userTerminal = $('.userTerminal')[0].value;
 params['keys'] = keys;
 params['regstyle'] = regStyle;
 params['terminal'] = userTerminal;
 params['days'] = days;
 params['num'] = num;
 params['startDate'] = startDate;
 params['endDate'] = endDate;
 this.props.searchHandle(keys,params);
 return false;
},

##Render部分

render:function(){
 return (
 <form onSubmit={this.handleSubmit} className='form-inline'>
 <div className="row" style={{'marginBottom':'10px'}}>
 <div className="col-md-2">
 <select refs="type" className='form-control input type' data-style="btn-default" title='任务类型'>
 <option value=''>所有</option>
 <option value='exportUserData'>账单导出</option>
 <option value='repairDefaultData'>修复数据</option>
 <option value='updateUserExtendData'>用户数据统计</option>
 <option value='mockerImportMail'>模拟登录导入账单</option>
 <option value='protocolImportMail'>协议登录导入账单</option>
 <option value='mockerFundImport'>公积金查询账单</option>
 <option value='mockerCOImport'>话费查询账单</option>
 <option value='mockerOnlineShopImport'>网络平台导入账单</option>
 <option value='sendPassword'>发送密码</option>
 </select>
 </div>
 <div className="col-md-2">
 <select refs="status" className='form-control input status' data-style="btn-default" title='任务状态'>
 <option value=''>所有</option>
 <option value='200'>执行中</option>
 <option value='100'>等待执行</option>
 <option value='900'>执行成功</option>
 </select>
 </div>
 <div className="col-md-2">
 <input type='submit' className="btn btn-primary btn-block" value="搜索" />
 </div>
 </div>
 </form>
 );
}

如果这个时候你使用select的话，什么onChange会在某种情况是不好用的，我的这个就是针对这种情况的，

因为我还使用了selectpicker这个bootstrap插件库"bootstrap-select"，感兴趣的可以去看看

展示一个Reflux的实例【虽然用的人比较少】

Tue, 01 Jul 2025 15:03:45 +0000

Reflux是根据React的flux创建的单向数据流类库。

Reflux的单向数据流模式主要由actions和stores组成。例如，当组件list新增item时，会调用actions的某个方法（如addItem(data)）,并将新的数据当参数传递进去，通过事件机制，数据会传递到stroes中，stores可以向服务器发起请求，并更新数据数据库。数据更新成功后，还是通过事件机制传递的组件list当中，并更新ui。整个过程的对接是通过事件驱动的。

这里记录一个比较实用的实例；具体的想看详情的可以去‘http://segmentfault.com/a/1190000002793786#articleHeader24’这里仔细研读。

var TodoActions = Reflux.createActions([
 'getAll',
 'addItem',
 'deleteItem',
 'updateItem'
]);
var TodoStore = Reflux.createStore({
 items: [1, 2, 3],
 listenables: [TodoActions],
 onGetAll: function () {
 $.get('/all', function (data) {
 this.items = data;
 this.trigger(this.items);
 }.bind(this));
 },
 onAddItem: function (model) {
 $.post('/add', model, function (data) {
 this.items.unshift(data);
 this.trigger(this.items);
 }.bind(this));
 },
 onDeleteItem: function (model, index) {
 $.post('/delete', model, function (data) {
 this.items.splice(index, 1);
 this.trigger(this.items);
 }.bind(this));
 },
 onUpdateItem: function (model, index) {
 $.post('/update', model, function (data) {
 this.items[index] = data;
 this.trigger(this.items);
 }.bind(this));
 }
});
var TodoComponent = React.createClass({
 mixins: [Reflux.connect(TodoStore, 'list')],
 getInitialState: function () {
 return {list: []};
 },
 componentDidMount: function () {
 TodoActions.getAll();
 }, 
 render: function () {
 return (
 <div>
 {this.state.list.map(function(item){
 return <TodoItem data={item}/>
 })}
 </div>
 )
 }
});
var TodoItem = React.createClass({
 componentDidMount: function () {
 TodoActions.getAll();
 },
 handleAdd: function (model) {
 TodoActions.addItem(model);
 },
 handleDelete: function (model,index) {
 TodoActions.deleteItem(model,index);
 },
 handleUpdate: function (model) {
 TodoActions.updateItem(model);
 },
 render: function () {
 var item=this.props.data;
 return (
 <div>
 <p>{item.name}</p>
 <p>{item.email}</p>
 <p>/*操作按钮*/</p>
 </div>
 )
 }
});
React.render(<TodoComponent />, document.getElementById('container'));

ReactJS 组件的生命周期需要的函数记录

Mon, 30 Jun 2025 15:57:33 +0000

React组件的生命周期分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实

DOM React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

React Pager分页实例

Mon, 30 Jun 2025 12:01:03 +0000

React的分页实例来了！[适合与webpack组合使用，不太适合纯html页面调用，不过可以根据您自己的情况进行改写]

define(function(require,exports,module){
 'use strict';
 
 var React = require('reactAddons');
 
 module.exports = React.createClass({
 clickHandler:function(e){
 e.preventDefault();
 this.props.listData(e.currentTarget.dataset.page);
 },
 render:function(){
 var cx = React.addons.classSet;
 var preClass = cx({
 'previous':true,
 'disabled':this.props.pre_stop == true
 });
 var nextClass = cx({
 'next':true,
 'disabled':this.props.next_stop == true
 });
 
 return (
 <nav>
 <ul className="pager">
 <li className={preClass}>
 <a href="#" onClick={this.clickHandler} data-page={this.props.page-1}>
 <span aria-hidden="true" >&larr;</span> Older
 </a>
 </li>
 <li className={nextClass}>
 <a href="#" onClick={this.clickHandler} data-page={this.props.page+1}>
 Newer <span aria-hidden="true">&rarr;</span>
 </a>
 </li>
 </ul>
 </nav>
 );
 }
 });
 
});

如何调用？

const PagerTest = React.createClass(){
 getInitialState:function(){
 return {
 lostData: {
 lostUserItem: [],
 totalCount: 0,
 currentTotalCount: 0
 },
 pagesize: 20,
 page: 1,
 params: {}
 }
 },
 render:function(){
 let nextStop = false;
 let preStop = false;
 //this.state.lostData.lostUserItem 这个就是一个数据数组
 if (this.state.lostData.lostUserItem.length < this.state.pagesize) {
 nextStop = true;
 }

 if ((this.state.page - 1) <= 0) {
 preStop = true;
 }

 let pager_props = {
 page: this.state.page,
 pre_stop: preStop,
 next_stop: nextStop,
 listData: this.loadMorePage
 };
 return (
 <Pager {...pager_props}/>
 );
 }
}

ReactJS on Dapeng Zhang

如何直接使用Reactjs

Reactjs安装

Fetch Api安装

添加jsx代码

React 16 Jest ES6级模拟 - 与MongoDB一起使用

项目初始化

与MongoDB一起使用(Using with MongoDB)

React 16 Jest ES6级模拟 - 监视并监视模拟情况

项目初始化

ES6 Class Mocks(使用ES6语法类的模拟)

跟踪使用情况（监视模拟）(Keeping track of usage (spying on the mock))

监视构造函数(Spying on the constructor)

监视类的方法(Spying on methods of our class)

在测试之间进行清理(Cleaning up between tests)

实践项目地址

React 16 Jest ES6级模拟 - 深入：了解模拟构造函数

项目初始化

ES6 Class Mocks(使用ES6语法类的模拟)

深入：了解模拟构造函数

手动模拟另一个ES6语法的类

使用模块工厂参数的简单模拟(Simple mock using module factory parameter)

*模块工厂功能必须返回一个功能(* Module factory function must return a function)

注意：箭头功能不起作用(Note: Arrow functions won’t work)

React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三、四

项目初始化

ES6 Class Mocks(使用ES6语法类的模拟)

ES6语法类的实例

ES6语法的类测试实例三 - 使用模块工厂参数调用jest.mock()(Calling jest.mock() with the module factory parameter)jest.mock(path，moduleFactory)接受模块工厂参数。

ES6语法的类测试实例四 - 使用mockImplementation（）或mockImplementationOnce（）替换mock(Replacing the mock using mockImplementation() or mockImplementationOnce())

React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例二

项目初始化

ES6 Class Mocks(使用ES6语法类的模拟)

ES6语法的类测试实例二，今天使用第二种方式 - 手动模拟(Manual mock)

ES6语法类的实例

React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例一

项目初始化

ES6 Class Mocks(使用ES6语法类的模拟)

一个ES6语法类的实例

React 16 Jest使用ES模块导入和模拟JSDOM中未实现的方法

项目初始化

Using with ES module imports(使用ES模块导入)

Mocking methods which are not implemented in JSDOM(模拟JSDOM中未实现的方法)

React 16 Jest手动模拟(Manual Mocks)

项目初始化

手动模拟(Manual Mocks)

模拟水果模块(Mocking fruit modules)

模拟Node核心模块(Mocking Node modules)

实例演示

React 16 Jest定时器模拟 Timer Mocks

定时器模拟(Timer Mocks)

运行所有计时器(Run All Timers)

运行待定时间器

按时间提前计时器(Advance Timers by Time)

React 16 Jest如何进行异步程序测试

项目初始化

异步程序测试

.resolves

async/await

Error handling

.rejects

React 16 Jest快照测试

项目初始化

Jest快照测试

快照交互模式

React 16 Jest单元测试 之 Jest工具

项目初始化【这里使用之前的项目，节省时间】

1、jest-changed-files

2、jest-diff

3、jest-docblock

4、jest-get-type

5、jest-validate

6、jest-worker

7、pretty-format

React 16 + Jest单元测试 之 Mock Functions(Mock Names 和 Custom Matchers)

项目初始化【这里使用之前的项目，节省时间】

Mock Names

Custom Matchers

React16 Jest单元测试 之 Mock Functions(Mocking Modules 和 Mock Implementations)

Mocking Modules

模块工厂功能必须返回一个功能( Module factory function must return a function)

React 16 Jest单元测试之 Jest工具

React 16 + Jest单元测试之 Mock Functions(Mock Names 和 Custom Matchers)

React16 Jest单元测试之 Mock Functions(Mocking Modules 和 Mock Implementations)

React16 Jest单元测试之 Mock Functions(Mock Return Values)

React16 Jest单元测试之 Mock Functions(Using a mock function)

React16 Jest单元测试之 Setup and Teardown(作用域、describe和test的执行顺序)

React16 Jest单元测试之 Setup and Teardown(重复设置或重复安装、一次设置或一次安装)

React16 Jest单元测试之 Testing Asynchronous Code(Async/Await)

React16 Jest单元测试之 Testing Asynchronous Code

React16 Jest单元测试之 Using Matchers

React16 之测试单元(Jest+React+Enzyme)

为什么要把测试案例放到目录tests

ReactJS 组件的生命周期需要的函数记录