用jest写单元测试

最近准备自己造一套轮子，技术栈暂定为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)$": "/test/__mocks__/file-mock.js",
        "\\.(css|less|sass|scss)$": "/test/__mocks__/object-mock.js",
    },
    testMatch: ['/**/__tests__/**/*.unit.(js|jsx|ts|tsx)'],   //这个是路径，可以自己修改
    transform: {
        "^.+unit\\.(js|jsx)$": "babel-jest",
        '^.+\\.(ts|tsx)$': 'ts-jest',
    },
    setupFilesAfterEnv: ["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