使用 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() });

 

setupTestFramew ...  詳細 X

  沒有英漢互譯結果
   請嘗試網頁搜索