I am using jest with typescript in my projects. I am getting undefined for all my .ts files using identity-obj-proxy but .js files work as expected.

This is my tsconfig.json:

{ "compilerOptions": { "target": "es5", "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "jsx": "react", "declaration": true, "sourceMap": true, "experimentalDecorators": true, "skipLibCheck": true, "outDir": "lib", "typeRoots": [ "./node_modules/@types", "./node_modules/@microsoft" ], "types": [ "es6-promise", "webpack-env" ], "lib": [ "es5", "dom", "es2015.collection" ] }, "include": [ "src/**/*.ts" ], "exclude": [ "node_modules", "lib" ]
}

This is my jest configuration:

"jest": { "unmockedModulePathPatterns": [ "React" ], "moduleFileExtensions": [ "ts", "tsx", "js" ], "transform": { "^.+\\.(d\\.ts|ts|tsx)$": "ts-jest" }, "testMatch": [ "**/src/**/*.test.+(ts|tsx|js)" ], "setupFiles": [ "raf/polyfill" ], "collectCoverage": true, "coverageReporters": [ "json", "lcov", "text", "cobertura" ], "coverageDirectory": "<rootDir>/jest", "collectCoverageFrom": [ "**/*.{ts,tsx}", "!**/*.d.{ts,tsx}", "!**/*.scss.ts", "!**/models/**", "!**/node_modules*/**" "!**/services/http.ts" ], "moduleNameMapper": { "\\.(css|less|scss|sass)$": "identity-obj-proxy", "^resx-strings/en-us.json": "<rootDir>/node_modules/@microsoft/sp-core-library/lib/resx-strings/en-us.json" }, "reporters": [ "default", "jest-junit" ], "coverageThreshold": { "global": { "branches": 50, "functions": 75, "lines": 75, "statements": 75 } } }

My test file(.ts):

import styles from './Somefile.module.scss';
describe('Test identity proxy', () => { test('undefined returned', () => { expect(styles.notundefined).toBe(undefined); }
});

If I save the file as .js then everything seems to work but not in .ts or .tsx files.

3 Answers

As @Nathanael suspects, I believe there is a bug in identity-object-proxy module.

In my case however it was not working when using:

import * as styles from './Somefile.module.scss';

Instead I followed @Nathanael's link and was happy to find @joaovieira's workaround. He created his own version of identity-object-proxy

module.exports = new Proxy( {}, { get: function getter(target, key) { if (key === '__esModule') { // True instead of false to pretend we're an ES module. return true; } return key; }, },
);

which he included in jest.config.js as follows:

module.exports = {
... moduleNameMApper: { '\\.(jpg|jpeg|png|gif|webp|svg)$': 'identity-obj-proxy', '\\.(css|scss)$': '<rootDir>/.jest/identity-obj-proxy-esm.js', }
};

To see his full answer go to

I'm using Jest 24 and I've ran into a similar issue (if not the same issue in different clothing)

When I include SASS or CSS files in my JS by using an ES6 import I ran into issues, fortunately there was a simple solution.

As the Jest documentation recommends, add the following transform to your package.json

"transform": { "\\.(css|less|sass|scss)$": "<rootDir>/test/mock/styleMock.js"
}

Further to the instructions on the Jest site, create the styleMock.js file, but instead of return just an object or a string, include a 'process' function that returns a string to resolve the issue, something like this.

module.exports = { process: function() { return ""; }
};

This will appease Jest if your aim is to just get on with writing tests (or fixing if you happen to be migrating from an older framework like I have been). The css ES6 imports won't be an issue anymore.

Hopefully this provides a slightly more up to date version of the previous solutions which "almost worked" for me!

Try importing your scss file as

import * as styles from './Somefile.module.scss';

There's an issue with identity-obj-proxy that prevents the standard import syntax from working in TypeScript, but for some reason the import * as notation works fine.

4

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.