最近準備自己造一套輪子盔沫，技術棧暫定為react+typescript，然后用jest做單元測試枫匾，這篇文章就主要寫一下自己使用jest的心得吧架诞。
第一步就是按照官網(wǎng)上的下載依賴，因為搭建架構的過程沒有使用腳手架干茉，所以要下載的東西比較多
yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer ts-jest
如果你是用create-react-app搭建的架構谴忧，則執(zhí)行下面的
yarn add --dev react-test-renderer
下載完依賴就是創(chuàng)建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是讓環(huán)境變量兼容的一個插件均驶，裝上即可
"test": "cross-env NODE_ENV=test jest --config=jest.config.js",
然后就可以開始寫測試了，創(chuàng)建一個hello.unit.tsx文件
hello.unit.tsx
describe('mytest', ()=> {
it('1等于1', () => {
expect(1).toEqual(1)
})
})
運行yarn test就會出現(xiàn)下面的東西了
image.png
