jest react项目配置

[wisetc]

用 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 组件中有用到前面的这些对象，肯定会卡住，所以需要将前面的对象加入到测试环境中。

// 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 测试框架，以及测试环境中的模拟浏览器的全局变量。