在日本开发 SaaS 产品,爱猫、爱读书、爱户外

2018-05-08 Jest 测试 CSS Modules


CSS Modules 解决了 CSS 全局作用域的问题,但是也引入了新的不便。

记录一下,Jest 如何测试 CSS Modules。

背景

React 的 SPA 项目,使用 Parcel.js 作为打包工具。使用 CSS Modules 模块化开发样式。

Parcel.js:极速零配置 Web 应用打包工具。

注:假的!配置少,但不是 0 配置。

问题

Jest 运行测试时无法理解 Less 语法, Less 代码无法转换成 JS 代码。

解决方法

使用 identity-obj-proxy mock CSS Modules。

1. install identity-obj-proxy

$ yarn add --dev identity-obj-proxy

2. 修改 package.json 中 jest 配置

"jest": {
  ...
  "moduleNameMapper": {
    "\\.(css|less)$": "identity-obj-proxy"
  }
},

再次运行 jest,Jest 可以理解 Less 语法了。

ref: