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
