如何在Webpack中集成Jest？配置setupTestFrameworkScriptFile报错求解

你的操作错误点 #

setupTestFrameworkScriptFile 是Jest专属的配置项，不属于Webpack的配置范畴，把它写到webpack.config.js里，Webpack自然会识别为非法属性报错。Jest和Webpack是两个独立工具，各自有专属配置文件，不能混写。

简单集成Jest与Webpack的步骤 #

1. 分开配置两个工具 #

• Jest配置：单独创建jest.config.js文件（或在package.json里添加"jest"字段），把Jest相关配置写在这里。
  注意：setupTestFrameworkScriptFile在Jest 24版本后已被弃用，推荐用setupFilesAfterEnv替代，示例配置：

  // jest.config.js
  module.exports = {
    setupFilesAfterEnv: ["<rootDir>/bin/jest.js"],
    // 其他Jest配置，比如测试文件匹配规则、模块映射等
  };
  

• Webpack配置：继续在webpack.config.js里编写打包相关配置，不要混入Jest内容。

2. 让Jest兼容Webpack的模块处理逻辑 #

如果你的Webpack里有别名、非JS模块（如CSS、图片），需要在Jest配置里做对应兼容：

• 处理Webpack别名：在jest.config.js里添加moduleNameMapper

  module.exports = {
    // ...其他配置
    moduleNameMapper: {
      "^@/(.*)$": "<rootDir>/src/$1" // 对应Webpack里的resolve.alias配置
    }
  };
  

• 处理非JS模块：把CSS、图片这类文件映射到mock文件，避免Jest报错

  module.exports = {
    // ...其他配置
    moduleNameMapper: {
      "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(png|jpg|svg)$": "<rootDir>/__mocks__/fileMock.js"
    }
  };
  

  对应的mock文件可简单写为空导出：

  // __mocks__/styleMock.js
  module.exports = {};
  

3. 通过npm脚本整合任务 #

在package.json的scripts里添加命令，方便一键执行构建或测试：

{
  "scripts": {
    "build": "webpack",
    "test": "jest",
    "build-and-test": "webpack && jest" // 先构建再测试
  }
}

之后执行npm run test就能跑Jest测试，npm run build执行Webpack打包，npm run build-and-test完成构建+测试的联动。

内容的提问来源于stack exchange，提问作者丶 Limeー来夢 丶