how-jest-works

How Jest Works(Jest是如何工作的)

1. 什么是Jest

Jest是由Facebook(Meta)开发的一个Javascript测试框架。支持多种前端框架，比如Babel, TypeScript, Node, React, Angular, Vue等等。它的特点是快速，简单，可扩展。

那么多文件都是干啥的？

如果你配置过Jest的测试环境，你会发现Jest用到很多文件，比如jest.config.js, tsconfig.json, setupTest.js, 等等。它们的作用是什么呢？

简单来说，当你在命令行执行npm run test时，node会调用Jest，Jest会读取jest.config.js文件，解析配置，然后执行测试。而jest.config.js文件中会指定一些其他的配置文件，setupTest.js等等。

2. 基于Nx框架的Jest配置

我们目前的项目基于Nx框架，其实Nx本身对于Jest已经支持的很好了，几乎不用做太多的配置，但是本文仍以Angular为例，看看如何配置Jest。

当我们使用Nx创建一个Angular项目时，会自动创建一个jest.config.ts文件，内容如下：

/* eslint-disable */
export default {
  displayName: 'todos',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.(html|svg)$',
    },
  },
  coverageDirectory: '../../coverage/apps/todos',
  transform: {
    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
  },
  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ],
};

在transform一节，我们看到了jest-preset-angular，这个是Angular官方提供的一个Jest预设，它会自动帮我们处理Angular的一些特殊文件，比如.ts, .html, .svg等等。如果我们不使用Angular，而是使用React，那么我们需要使用jest-preset-react，如果是Vue，那么我们需要使用vue-jest。如果我们使用的是Nx，那么我们可以使用@nrwl/jest，它会自动帮我们处理Nx的一些特殊文件，比如.ts, .html, .svg等等。

为什么需要transform呢？因为Jest只能处理JavaScript，对于TypeScript/JSX等高级的文件格式，我们必须先将其转换为JavaScript，然后再交给Jest处理。

该transform块的含义是，对于所有以.ts, .mjs, .js, .html结尾的文件，都使用jest-preset-angular来处理。

如果transform配置不正确，就会出现如下错误：

Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.

How jest parse config and execute tests?

Jest是如何解析配置文件，并执行测试的呢？我们可以通过--debug参数来查看Jest的执行过程。

To be continue…

References

• Jest官网
• jest-preset-angular
• ts-jest