首先安装依赖css
npm i jest -gnode
npm i jest babel-jest identity-obj-proxy enzyme enzyme-adapter-react-15.4 react-addons-test-utils --save-devreact
以上 enzyme-adapter-react-15.4 是根据 react 版本进行安装相应版本的 adapter。web
而后使用 jest 测试 react component 的时候,组件中 import 的 scss,png 等资源须要在 jest 配置中进行模拟。chrome
jest 的配置,网上说明的是在 package.json 中能够配置 jest 字段来进行 jest 的配置。可是实践的时候,发现 package.json 中的配置无效!多是 jest 20 版本的 bug。npm
后来在 jest.config.js 文件中配置后可正常使用!json
module.exports = {
verbose: true,
testMatch: ['**/test/**/*.js?(x)', '**/?(*.)(spec|test).js?(x)'],
testPathIgnorePatterns: ['setup.js', '/bin/', '/build/', '/dist/', '/lib/', '/node_modules/'],
setupTestFrameworkScriptFile: './jest.setup.js',
// mock assets
moduleNameMapper: {
'\\.(css|scss|less)$': 'identity-obj-proxy',
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'identity-obj-proxy'
}
};
上面的 setupTestFrameworkScriptFile 指定在运行测试代码以前要运行的 js 文件,在 ./jest.setup.js 里咱们须要添加上 enzyme 的 adapterbabel
const enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-15.4');
enzyme.configure({ adapter: new Adapter() });