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

首先安装依赖

npm i jest -g

npm i jest babel-jest identity-obj-proxy enzyme enzyme-adapter-react-15.4 react-addons-test-utils --save-dev

以上 enzyme-adapter-react-15.4 是根据 react 版本进行安装相应版本的 adapter。

然后使用 jest 测试 react component 的时候，组件中 import 的 scss，png 等资源需要在 jest 配置中进行模拟。

jest 的配置，网上说明的是在 package.json 中可以配置 jest 字段来进行 jest 的配置。但是实践的时候，发现 package.json 中的配置无效！可能是 jest 20 版本的 bug。

后来在 jest.config.js 文件中配置后可正常使用！

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 的 adapter

const enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-15.4');
enzyme.configure({ adapter: new Adapter() });

X

请尝试网页搜索