【实战】jest前端测试记录（一）

我现在已经在我的项目中开始编写单元测试代码了，为了更好的编写单元测试代码，我在编写界面的时候采用了数据与界面分离的策略，比如当接收到后台的数据，先进行数据处理，把数据处理成直接可以在界面上直接渲染的格式，包括字段也完全相同，如果是根据一个状态显示不同的信息，我都会在数据处理中解决掉。这样我的大部分测试都只需要测试好数据处理部分就可以了。

如果只是测试纯函数，是非常简单的。为啥这样说了，因为函数都是有输入输出的，假如我在渲染的过程处理数据，这样我就不好测试渲染过程中的逻辑，对于刚学测试的我来说，的确很难。写完纯函数的测试，运行以下覆盖率，可以直观的看到那些有没有被测试到，等把所有的情况都测试到以后就 OK 了。

然后我就开始测试公用的组件，之所以这样就是为了防止无意中修改了公用组件，比如改了公用组件的数据形式或者显示方式等诸多原因，特别是 props 和 页面跳转传入的参数 的更改，这个时候如果有组件依赖这个组件，并且传入的数据是以前的数据，就通不过测试。

遇到的第一个问题：

● Test suite failed to run

    Invariant Violation: Native module cannot be null.

      at invariant (node_modules/invariant/invariant.js:40:15)
      at new NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:37:7)
      at Object.<anonymous> (node_modules/react-native-reanimated/lib/commonjs/ReanimatedEventEmitter.js:4:16)
      at Object.<anonymous> (node_modules/react-native-reanimated/lib/commonjs/core/AnimatedCall.js:2:1)

我看网上说出现这样的原因是因为，有一些 Native module 没办法测试，这里我使用的是 react-test-renderer 测试的，我只需要生成映射即可，现在还没有别的需求。

于是我就开始注释代码，看看是哪一个原生组件导致的，最终找到了 react-native-reanimated 这个组件，这个组件是动画相关的，当然使用官方的动画出现了问题我就使用了这个，现在测试的时候出现了这个问题；知道了是这个的问题，最简单的办法就是去 github 去找这个问题的答案，刚开始我以为是在测试前添加下面的代码即可：

import {jest} from '@jest/globals';
jest.mock('react-native-reanimated', () =>
  require('react-native-reanimated/mock'),
);

发现并不是这样， jest 对于这类好像是需要提前处理，所以需要配置，首先在根目录下新建文件（有的话就不用了）： jestSetupFile.js 然后将上面的代码放进去，然后再打开 package.json 的文件：

"jest": {
  "preset": "react-native",
  "setupFiles": ["./jestSetupFile.js"]
}

这样就可以了。