jest package import assets issues

[wdfinch]

Hi all, I'm having an issue with jest and mapping file names in workspaces. I believe this is a yarn issue since the error is related to modules not being found. I would really appreciate it if anyone had any insights here.

I'm trying to use the moduleNameMapper to handle static objects. The jest docs recommend that you use the identity-obj-proxy package for mapping.

This works fine, but it breaks when I try to import a css file from a package rather than having it be present in my workspace. When I run yarn run jest, I get the following error.

Error: Configuration error:

Could not locate module rc-tooltip/assets/bootstrap.css mapped as:
identity-obj-proxy.

I'm not sure why I can't import this file. Is there some setting or feature of yarn I need to use to handle this?

I've attached my sample project below.

workspaces-jest.zip

[merceyz]

Jest is hiding the real error, if you run PNP_DEBUG_LEVEL=1 yarn test you'll see this error:

✖ Your application tried to access identity-obj-proxy, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

  In ← 'identity-obj-proxy'
  In ← 'C:\\workspaces-jest\\package/'
  In ← { extensions: [ '.js', '.json', '.jsx', '.ts', '.tsx', '.node' ] }

The fix is to resolve the mapping up front

diff --git a/app/jest.config.js b/app/jest.config.js
index 31ca6db..eb2411f 100644
--- a/app/jest.config.js
+++ b/app/jest.config.js
@@ -4,7 +4,7 @@ const config = {
   displayName: 'react-flow-builder',
   moduleNameMapper: {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-    "\\.(css|less)$": "identity-obj-proxy"
+    "\\.(css|less)$": require.resolve("identity-obj-proxy")
   },
 };
 

[merceyz]

@SimenB Is there something we could change in Jest to help make this clearer?

[wdfinch]

Thanks so much! That worked.

[SimenB]

deffo, we should show the underlying error. up for sending a PR (or at least open up an issue?)