使用 jest 测试 react component 的配置,踩坑。

首先安装依赖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() });

 

  没有英汉互译结果
   请尝试网页搜索
相关文章
相关标签/搜索