react typescript jest config (一)

1. initialize project

create a folder project

Now we’ll turn this folder into an npm package.

npm init -y

This creates a package.json file with default values.

2. Install react typescript dependencies

First ensure Webpack is installed.

npm i webpack webpack-cli webpack-merge html-webpack-plugin webpack-dev-server -D

Webpack is a tool that will bundle your code and optionally all of its dependencies into a single .js file.

Let’s now add React and React-DOM, along with their declaration files, as dependencies to your package.json file:

npm i react react-dom
npm i @types/react @types/react-dom -D

That @types/ prefix means that we also want to get the declaration files for React and React-DOM. Usually when you import a path like "react", it will look inside of the react package itself; however, not all packages include declaration files, so TypeScript also looks in the @types/react package as well. You’ll see that we won’t even have to think about this later on.

Next, we’ll add development-time dependencies on the ts-loader and source-map-loader.

npm i typescript ts-loader source-map-loader -D
or
npm i awesome-typescript-loader source-map-loader -D

Both of these dependencies will let TypeScript and webpack play well together. ts-loader helps Webpack compile your TypeScript code using the TypeScript’s standard configuration file named tsconfig.json. source-map-loader uses any sourcemap outputs from TypeScript to inform webpack when generating its own sourcemaps. This will allow you to debug your final output file as if you were debugging your original TypeScript source code.

Please note that ts-loader is not the only loader for typescript. You could instead use awesome-typescript-loader

Read about the differences between them:

https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader

Notice that we installed TypeScript as a development dependency. We could also have linked TypeScript to a global copy with npm link typescript, but this is a less common scenario.

3. Install jest enzyme dependencies

1、install jest dependencies

npm i jest @types/jest ts-jest -D

2、 install enzyme dependencies

npm i enzyme enzyme-adapter-react-16 jest-enzyme  enzyme-to-json -D
npm i @types/enzyme @types/enzyme-adapter-react-16 -D

4. install another compiler for typescript use babel dependencies

install babel loader

npm i @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript -D

npm i babel-loader babel-plugin-import -D

config babel

module.exports={
    presets: [
        "env",
        "react",
        "typascript"
    ],
    plugins: [
        ["lodash"],
        ["import", {libraryName: "antd", style: true}]
    ]
}

use babel loader instaed of ts-loader