Roc testing problem

[wfalowski]

Hi, I have problem with jest testing using roc test command. My case: I have icon which I importing: import MyWallet from './my-wallet.png';, and I am using it as image component source. Component works fine but when I run tests I have got errors:

  ● Test suite failed to run

    /.../presentation/payment-icon-module/src/icons/my-wallet.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^

    SyntaxError: Invalid or unexpected token

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (presentation/payment-icon-module/src/icons/index.js:1:119)
      at Object.<anonymous> (presentation/payment-icon-module/src/PaymentIconModule.js:3:14)

I found solution on github: https://github.com/facebook/jest/issues/2663

But when I just append it to package.json it doesn't work. Could you look at this case and help me found some solution of this problem?

[andreasrs]

Hey @wfalowski

Could you link us your current package.json and roc.config.js? And we'll try to help you out here.

[wfalowski]

@andreasrs Sure, roc.config.js:

module.exports = {
    settings: {
        repo: {
            mono: ['presentation', 'util', 'container'],
        },
    },
};

{
    "name": "mypage-components",
    "description": "Mono-repository for MyPage components",
    "main": "index.js",
    "scripts": {
        "start": "roc",
        "precommit": "npm-run-all \"start lint\" build-storybook",
        "prepush": "npm start test -- --coverage",
        "build-storybook": "node_modules/.bin/build-storybook -c .storybook -o .out",
        "deploy-storybook": "node scripts/publish.js"
    },
    "author": "",
    "license": "UNLICENSED",
    "private": true,
    "engines": {
        "node": ">=6.0.0",
        "npm": ">=3.0.0"
    },
    "devDependencies": {
        "babel-eslint": "^6.1.2",
        "commitizen": "^2.8.6",
        "conventional-changelog": "1.1.0",
        "css-loader": "^0.26.1",
        "cz-conventional-changelog": "^1.2.0",
        "enzyme": "^2.7.1",
        "eslint": "^3.14.0",
        "eslint-config-airbnb": "^14.0.0",
        "eslint-plugin-babel": "^3.3.0",
        "eslint-plugin-import": "^2.2.0",
        "eslint-plugin-jsx-a11y": "3.0.2",
        "eslint-plugin-react": "6.9.0",
        "husky": "^0.13.3",
        "image-webpack-loader": "^3.3.1",
        "lodash": "^4.16.4",
        "node-sass": "^4.5.0",
        "normalize.css": "^5.0.0",
        "npm-run-all": "4.0.2",
        "react-addons-test-utils": "^15.4.2",
        "react-css-themr": "^1.6.1",
        "react-router": "^3.0.5",
        "recompose": "^0.22.0",
        "roc": "^1.0.0-rc.16",
        "roc-plugin-repo": "0.0.5",
        "roc-plugin-repo-react": "0.0.2",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.13.1",
        "stylelint": "^7.10.1",
        "stylelint-config-standard": "^16.0.0"
    },
    "config": {
        "commitizen": {
            "path": "cz-conventional-changelog"
        }
    },
    "jest": {
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/scripts/assetsTransformer.js",
            "\\.(css|less)$": "<rootDir>/scripts/assetsTransformer.js"
        }
    }
}

And I also add assetsTransformer into scripts catalogue:

const path = require('path');

module.exports = {
    process(src, filename, config, options) {
        console.info('Assets transformer processing');
        return `module.exports = JSON.stringify(path.basename(filename));`;
    },
};