create-react-app 创建typeScript项目，并引入jest单元测试

1，创建react项目，添加typeScript支持

参考文档：https://www.html.cn/create-react-app/docs/adding-typescript/

npx create-react-app my-app --typescript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

接下来，将任何文件重命名为 TypeScript 文件（例如 src/index.js 重命名为 src/index.tsx ）并 重新启动开发服务器！

2，添加jest

参考文档：https://jestjs.io/docs/getting-started#using-typescript

npm install --save-dev jest

src下创建待测试的目录（名称可以自定义）：

比如下图中的例子：fn目录里面存放功能函数；fn_test目录里面存放测试用例。

sum.ts:

export default function sum(a:number, b:number): number {
  return a + b;
}

sum.test.ts:

import sum from '../fn/sum'

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

将 package.json 文件中的这段内容修改如下：

{
  "scripts": {
    "test": "jest"
  }
}

npm test 命令启动项目

如果你足够幸运，那你会得到的结果是这样的:

 

错误解决：

没有那么幸运的话，可能遇到的错误有：

1，npm start显示没有问题，重命名为ts之后，依然可以在3000端口看到效果。

但是npm test命令结果：测试案例不通过：

注释掉第二行代码，使用第一行的import会报错；错误如下：

（我一开始以为是ts和js文件后缀名的问题，所以尝试把后缀改成了ts或者js，依然报错）

而注释掉第一行，使用require不会报错，

解决方法：

首先：

在package.json里面添加这样一项：

然后添加如下依赖：

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

然后在项目根目录新建.babelrc 文件，在 .babelrc文件中 添加以下内容：

{
    "plugins": ["transform-es2015-modules-commonjs"]
}

这个问题解决了，import可以正常使用了。

参考：https://blog.csdn.net/u013378029/article/details/105415786

2，编写ts规范的代码报错

代码如下：

使用被注释掉的代码块，并且无论后缀名是js还是ts都不会报错。

但是将后缀名改为ts之后，并且编写ts规范的代码，会报这样的错误：

考虑到是ts的问题，于是添加jest的babel依赖和typeScript依赖

参考：https://jestjs.io/docs/getting-started#using-babel

https://jestjs.io/docs/getting-started#using-typescript

npm install --dev babel-jest @babel/core @babel/preset-env

npm install --dev @babel/preset-typescript

再按照官方文档在根目录创建babel.config.js文件，文件里面的内容为：

module.exports = {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
     '@babel/preset-typescript',
    ],
  };

这事npm test，可以发现错误变了：

说这个文件有问题。额，这是官方说的这样搞。

最后找到的解决方法如下：

将 babel.config.js 文件重命名为 babel.config.cjs

大佬解释的原因：这与 Babel 设置有关。babel.config.extension 使用 .mjs、cjs 或 js 扩展名。在运行 LTE Node 12.6.2 的情况下，需要在目录 babel.config.cjs 的根目录下进行此配置。

参考：https://stackoverflow.com/questions/61146112/error-while-loading-config-you-appear-to-be-using-a-native-ecmascript-module-c