最近准备自己造一套轮子，技术栈暂定为react+typescript，然后用jest做单元测试，这篇文章就主要写一下自己使用jest的心得吧。
第一步就是按照官网上的下载依赖，因为搭建架构的过程没有使用脚手架，所以要下载的东西比较多
yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer ts-jest
如果你是用create-react-app搭建的架构，则执行下面的
yarn add --dev react-test-renderer
下载完依赖就是创建jest的配置文件，具体各个配置什么意思，大家自己搜即可，这里就不解释了
jest.config.js
// https://jestjs.io/docs/en/configuration.html
module.exports = {
verbose: true,
clearMocks: false,
collectCoverage: false,
reporters: ["default"],
moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
moduleDirectories: ['node_modules', 'include'],
moduleNameMapper: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/file-mock.js",
"\\.(css|less|sass|scss)$": "<rootDir>/test/__mocks__/object-mock.js",
},
testMatch: ['<rootDir>/**/__tests__/**/*.unit.(js|jsx|ts|tsx)'], //这个是路径，可以自己修改
transform: {
"^.+unit\\.(js|jsx)$": "babel-jest",
'^.+\\.(ts|tsx)$': 'ts-jest',
},
setupFilesAfterEnv: ["<rootDir>test/setupTests.js"]
}
.babelrc
{
"presets": ["react-app"]
}
package.json里在scripts里加入下面一行，cross-env是让环境变量兼容的一个插件，装上即可
"test": "cross-env NODE_ENV=test jest --config=jest.config.js",
然后就可以开始写测试了，创建一个hello.unit.tsx文件
hello.unit.tsx
describe('mytest', ()=> {
it('1等于1', () => {
expect(1).toEqual(1)
})
})
运行yarn test就会出现下面的东西了
image.png
