Open wisetc opened 6 years ago
用 create-react-app 构建的 react web 项目,一般会帮你自动配置上 eslint 和 jest,运行 eject 脚本之后,可以在 package.json 中看到相应的配置。
create-react-app 构建的项目采用的是相对宽松的政策,比如 eslint 采用的是 react-app 插件规则,对代码风格没有做严格要求。构建好的 jest 配置也是最基础的,可根据自身的需要选择对应的测试框架。如果使用的是 enzyme 作为测试框架,那么通过下面的 setupTests 为测试框架配置启动项将是省事的。
// config/jest/setupTests.js import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() });
然后将 setupTests 配置项加入到 package.json 相应的 jest 配置项下。
"setupTestFrameworkScriptFile": "<rootDir>/config/jest/setupTests.js"
由于 jest 在 node 中运行,enzyme 框架中也没有 location, storage 这些浏览器 window 的对象,如果某个待测试的 react 组件中有用到前面的这些对象,肯定会卡住,所以需要将前面的对象加入到测试环境中。
window
// config/jest/window-location.mock.js Object.defineProperty(global.window.location, "href", { writable: true, value: "localhost:3000" });
// config/jest/window-storage.mock.js let store = {}; Object.defineProperty(global.window, "localStorage", { writable: true, value: { getItem: (key) => { return store[key]; }, setItem: (key, value) => { store[key] = value.toString(); }, clear: () => { store = {}; }, removeItem: (key) => { delete store[key]; } } }); Object.defineProperty(global.window, "sessionStorage", { writable: true, value: { getItem: (key) => { return store[key]; }, setItem: (key, value) => { store[key] = value.toString(); }, clear: () => { store = {}; }, removeItem: (key) => { delete store[key]; } } });
然后需要在 package.json 的 jest 的配置项下,加入相应的配置。
"setupFiles": [ // ... "<rootDir>/config/jest/window-storage.mock.js", "<rootDir>/config/jest/window-location.mock.js" ]
上面的两次配置,分别配置了 enzyme 测试框架,以及测试环境中的模拟浏览器的全局变量。
用 create-react-app 构建的 react web 项目,一般会帮你自动配置上 eslint 和 jest,运行 eject 脚本之后,可以在 package.json 中看到相应的配置。
create-react-app 构建的项目采用的是相对宽松的政策,比如 eslint 采用的是 react-app 插件规则,对代码风格没有做严格要求。构建好的 jest 配置也是最基础的,可根据自身的需要选择对应的测试框架。如果使用的是 enzyme 作为测试框架,那么通过下面的 setupTests 为测试框架配置启动项将是省事的。
然后将 setupTests 配置项加入到 package.json 相应的 jest 配置项下。
由于 jest 在 node 中运行,enzyme 框架中也没有 location, storage 这些浏览器
window
的对象,如果某个待测试的 react 组件中有用到前面的这些对象,肯定会卡住,所以需要将前面的对象加入到测试环境中。然后需要在 package.json 的 jest 的配置项下,加入相应的配置。
上面的两次配置,分别配置了 enzyme 测试框架,以及测试环境中的模拟浏览器的全局变量。