（十三）Jest配置文件介绍

jest --init命令在根目录创建 jest.config.js文件。具体代码如下：

module.exports = {

  preset: '@vue/cli-plugin-unit-jest',

  moduleFileExtensions: [

    "js",

    "json",

    "jsx",

    "ts",

    "tsx",

    "node",

    "vue"

  ],

  transform:{

    '^.+\\.vue$':'vue-jest',

    '.+\\.(css|styl|less|sass|scss|svg|png|jpg)$':'jest-transform-stub',//静态资源

    '.\\.jsx?$':'babel-jest'//js或jsx 语法转化

  },

  transformIgnorePatterns:[

    '/node-module'

  ],

  moduleNameMapper:{

    '^@/(.*)$':'<rootDir>/src/$1'

  },

  snapshotSerializers: [

    'jest-serialzer-vue'//对vue的组件做snapshot测试时使用jest-serializer-vue 第三方模块对快照做格式化。

  ],

  testMatch:[

    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__test__/*.(js|jsx|ts|tsx)'//**/tests/unit/**/*.spec.(js|jsx|ts|tsx)自动查找tests/unit下的所有js\jsx文件 当成测试文件执行

  ],

  testURL:'http://localhost/',//虚拟jsDom的路径  模拟浏览器地址

  watchPlugins:[

    'jest-watch-typeahead/filename',

    'jest-watch-typeahead/testname'//交互式提示

  ]

}

 

1>、rootDir：其实就是指整个项目的根目录，也就是最外层的目录。这里多句嘴，再解释下path.resolve(__dirname,"../../")的意义，他最终返回的结果是该问见所在的根目录，简单来说__dirname返回的是当前目录，再向上两层，就是整个项目的根目录了。

2>、moduleFileExtensions：这个文档解释的是“模块使用的文件扩展名数组，从左往右查找这些文件”。这个参数的意义就是让jest知道你需要测试覆盖的文件的扩展名都是什么。

比如：import HelloWorld from '@/components/HelloWorld'

moduleFileExtensions: [

    "js",

    "json",

    "jsx",

    "ts",

    "tsx",

    "node",

    "vue"

  ],

没有vue的时候，试着运行测试：npm run test:unit 此时就会报错。如果加上vue就可以正常运行。

3>、transform 语法自动转化

transform:{

    '^.+\\.vue$':'vue-jest',

    '.+\\.(css|styl|less|sass|scss|svg|png|jpg)$':'jest-transform-stub',//静态资源

    '.\\.jsx?$':'babel-jest'//js或jsx 语法转化

  }

4>、transformIgnorePatterns  哪些文件夹下的文件不需要转化。node-module中都是第三方组件，都是已经转化好的，没有必要再转化。

5>、moduleNameMapper  模块映射，把别名映射到真正的路径下。如：import HelloWorld from '@/components/HelloWorld'

其中@就是指根目录下的src。

6>、snapshotSerializers //对vue的组件做snapshot测试时使用jest-serializer-vue 第三方模块对快照做格式化。