Create-react-app: Mocking scoped package libraries

[llamamoray]

I've been working on migrating a project which we ejected some time ago back into CRA.

I've come across a problem with the way we are mocking scoped packages. We were using the moduleNameMapper in the jest section of our package.json like this:

package.json

"jest": {
  "moduleNameMapper": {
    "^@org-name/package-one$": "<rootDir>/__mocks__/org-name/package-one/dist/package.js",
    "^@org-name/package-two$": "<rootDir>/__mocks__/org-name/package-two/build/index.js"
  }
}

When I add this to the un-ejected CRA project I get the following error:

These options in your package.json Jest configuration are not currently supported by Create React App:

  • moduleNameMapper

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

Any ideas how I can get these mocks working?

[BrendanFDMoore]

FYI related: https://github.com/cognitedata/create-react-app/pull/5

[bugzpodder]

Try using jest CLI for "test" in package.json:
react-scripts test --env=jsdom --moduleNameMapper='{\"^.+\\\\.(css|less|scss)$\":\"identity-obj-proxy\"}'"
It isn't pretty but it worked for me.

[llamamoray]

@bugzpodder using your method is there a way to map a scope (say @myscope) to a mock directory which has various mocks in there with the relative paths of the package references.

For example I have a package @myscope/common-lib and in this I want to mock imports of:

• @myscope/common-lib/authUtils
• @myscope/common-lib/mathUtils

Do you know if I have to point to a concrete file for each reference e.g.
react-scripts test --env=jsdom --moduleNameMapper='{\"^@myscope/common-lib/authUtils\":\"<rootDir>/__mocks__/authUtils.js\"}'

or is there a way to do something like this:
react-scripts test --env=jsdom --moduleNameMapper='{\"^@myscope.*\":\"<rootDir>/__mocks__/myscope\"}'
where I have a directory sructure
```

/__mocks__
/myscope
/authUtils
/index.js
/mathUtils
/index.js

[bugzpodder]

I am not too familiar with this jest feature, I would look at their docs. But essentially you can pass in CLI flags for jest this way through package.json

[llamamoray]

* Workaround *
_Thanks for pointing me in the right direction @bugzpodder_

I've just done some reading and managed to get it working. You can back reference the regex groups using $1, $2, $n etc which is really neat as I can map everything under my scope doing this:
"test": "react-scripts test --env=jsdom --moduleNameMapper='{\"^@myscope\/(.*)\": \"<rootDir>/__mocks__/@myscope/$1\"}'"

and map it by matching the directory structure of any package under that scope:

<rootDir>
    /__mocks__
        /myscope
            /my-package
                /authUtils
                    /index.js
                /mathUtils
                     /index.js
            /my-other-package
                ...

I can use these mocks like jest.mock('@myscope/my-package/authUtils') as the back reference maps @myscope/my-package/authUtils to <rootDir>/__mocks__@myscope/my-package/authUtils.

I think being able to define this in the package.json would still be a nice feature, but you _can_ provide escaped json to your npm test command.

[nareshbhatia]

I am running into the same situation, trying to migrate an app from create-react-app-ts to create-react-app. The original app uses moduleNameMapper to mock some of its own modules during testing.

It appears that CRA is using moduleNameMapper to mock a couple of modules internally. However, in that case, its fair to ask the CRA team to provide guidance on how they expect people to mock their own modules. Would it be possible to let the app specify moduleNameMapper and merge its settings with CRA's internal config?

[nareshbhatia]

I have created PR https://github.com/facebook/create-react-app/pull/6633 to support merging of external moduleNameMapper configuration with react-scripts' internal configuration. I believe its a win-win solution. Hopefully everyone agrees.

[nikonov91-dev]

I dont know why, but i solved such problem with moduleNameMapper pulling it out of the package.json and putting into jest.config.js, now my jest omits scss files as should
module.exports = { ..., "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js", "\\.(scss|sass|css)$": "identity-obj-proxy" } }

[nareshbhatia]

@LeksorHayabusa, I tried your workaround. It is not working for me. I think the reason Jest omits scss files for you is because the internal Jest configuration asks it to do so.

[skarode96]

I was trying to run the Jest test suite in my local environment! I created a jest.config.js in the root directory of my project and moved the configs of Jest from package.json to jest.config.js
module.exports = { moduleNameMapper: { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "jest-transform-stub", "\\.(css|less|scss|sass)$": "identity-obj-proxy" } };
and while running the test suite on local machine, I have provided the config path to IDE as jest.config.js and test suite is running successfully.

also while running tests through cmd
npm run test
it is running without errors !

[ianschmitz]

Already fixed by #6055.