keyz/identity-obj-proxy

An identity object using ES6 proxies. Useful for mocking webpack imports like CSS Modules.

identity-obj-proxy's Issues

undefined returned when using typescript with jest

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.

using identity-obj-proxy for scss: all scss variables are undefined during testrun

variables from scss files are undefined during testrun, even when an obj-proxy is configured under jest section.

To Reproduce
I found a repository, where it is easy to reproduce by adding a snapshot to one of the existing tests and examine the result. you will find out, that varaibles from scss are not there.
When you create a snapshot of the wrapper.render() without html, you can examine the object tree where the class attributes are being set to undefined.

If you add
console.log("rendering css "+ styles.container); in the render method of the icecreamshop, your console shows 'rendering css undefined'

With this behaviour I am not able to test conditional setting of classes etc...

Steps to reproduce the behavior:

1. git clone https://github.com/SharePoint/sp-dev-fx-webparts

2. open the folder 'repositoryFolder/sp-dev-fx-webparts\samples\react-jest-testing' in visual studio code

3. open terminal and run npm install

4. open following test: sp-dev-fx-webparts\samples\react-jest-testing\src\webparts\iceCreamShop\test\part1EnzymeBasics.test.ts

5. go to line 34 it('should root web part element exists', () => {

6. add line in this test: expect(reactComponent.render().html()).toMatchSnapshot("testsnapshot");

7. In Icecreamshop.tsx under components folder add following into the render method:
   console.log("rendering css "+ styles.container);

8. run npm test

9. open the snapshot file under test
   You will see, that the styles which were set through scss varaibles are not present inside the snapshot.
   You will also see, that the log shows: rendering css undefined

I experience same behaviour in my project, where I debug my code. Varaibles from scss are being set to undefined although I have configured a proxy. I even can jump via f12 to the content of the scss.d.ts file, but still the variable is set to undefined although it should have a value.

Expected behavior
The log should show "setting style..." with the content of the variable from the scss file.
The Snapshot should create an html, where the classes are being set.

Link to repl or repo (highly encouraged)
https://github.com/SharePoint/sp-dev-fx-webparts

envinfo
System: OS: Windows 10 10.0.18362
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Binaries:
Node: 8.11.1 - C:\Program Files\nodejs\node.EXE
npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
npmPackages:
jest: 22.4.3 => 22.4.3

Findings: I tried adding my own proxy like this:
idObj = new Proxy({}, {
get: function getter(target, key) {
if(key !== 'default'){
let test = 1;
}
if (key === '__esModule') {
return true;
}
return key;
}
});

module.exports = idObj;

When I debug, I found out that all keys are named "default". No other keys are passing through...

Webpack loader

Here goes a simple webpack loader: https://github.com/lucasconstantino/identity-object-proxy-loader

Assumes process implies process.versions.node

We are simulating process in the browser using https://github.com/defunctzombie/node-process/blob/master/browser.js . It doesn't have process.versions.node in it, so this check over here gives an error: https://github.com/keyz/identity-obj-proxy/blob/master/src/index.js#L10

It would be nice if the code were updated to handle the case where process.versions.node is set even if process is not.

Support Object.prototype.* calls (such as hasOwnProperty).

👋 Hi there!

We have code that looks like this:

import colors from 'colors.less';

function exampleUtilFunction(color) {
  if (!colors.hasOwnProperty(color)) {
    throw new Error();
  }
}

When using this mock, it fails with:

TypeError: colors.hasOwnProperty is not a function

As a quick fix, we added this code to the proxy:

if (key === 'hasOwnProperty') {
  return () => true;
}

I think it'd be nice if identity-obj-proxy supported the methods on Object.prototype. I'm happy to submit a PR if it would be accepted. :)

Check that the file exists

I have run into the following issue a few times now.

1. Create an SCSS file
2. Import it into a React component
3. Run jest.
4. Jest passes.
5. Delete the SCSS file, keep the import statement as-is in your React component
6. Run jest.
7. Jest still passes even though the file doesn't exist.
8. Build fails in CI/CD pipeline.

It would be nice if identity-obj-proxy could check if the file exists before proxying the object.

Use it with babel-plugin-react-css-modules

Is there a way to use it with babel-plugin-react-css-modules? There is no need for style object with this install. For example I use it like this.

import './titleComponent.local.scss'
const TitleComponent = () => (
  <div styleName="container">
    <h2 styleName="align-center">Home Scene</h2>
    <img src={logo} alt="logo" styleName="imageRotate" className="img-fluid mx-auto d-block" />
  </div>
)

styleName are CSS Modules and className are global (Bootstrap styles) and this is how my snapshot looks when testing with JEST. Instead of just the the name of the class it gives me the whole generated css module name.

exports[`should render TitleComponent correctly 1`] = `
<div
  className="scenes-home-components-___titleComponent-local__container___3XGZ-"
>
  <h2
    className="scenes-home-components-___titleComponent-local__align-center___weEgB"
  >
    Home Scene
  </h2>
  <img
    alt="logo"
    className="img-fluid mx-auto d-block scenes-home-components-___titleComponent-local__imageRotate___XkO9S"
    src="test-file-stub"
  />
</div>

Seems like the postinstall is wrong

$ npmisd identity-obj-proxy
/
> [email protected] postinstall /Users/dozoisch/Documents/roundup-frontend/node_modules/identity-obj-proxy
> npm run build


> [email protected] build /Users/dozoisch/Documents/roundup-frontend/node_modules/identity-obj-proxy
> npm run clean && npm run lint && npm test && npm run build:babel


> [email protected] clean /Users/dozoisch/Documents/roundup-frontend/node_modules/identity-obj-proxy
> rimraf build

sh: rimraf: command not found

Support named exports

When using CSS modules with named exports (e.g. you're using Typescript and typings-for-css-modules-loader), they look like:

export const foo = 'foo';
export const barBaz = 'barBaz';

And the consumer uses as:

import * as styles from './styles.css';

...
<div className={styles.barBaz} />

This mock does not play nice. I've found that returning true for the __esModule check here does work - essentially saying that our mocked module is an ES module and the keys are the named exports.

Any ideas if and how this project could accommodate that? E.g. using identity-obj-proxy/esm?

Cannot install through NPM

Installing identity-obj-proxy through NPM is throwing an error.

Error when there is no "es2015" in project babelrc file

Couldn't find preset "es2015" relative to directory "/apps/jenkins/build/workspace/XXXX/BUILD/node_modules/identity-obj-proxy"

Could you please build to and point main to the dist file instead?

I can not install package

Npm log:

npm install --save-dev identity-obj-proxy
npm ERR! Darwin 16.6.0
npm ERR! argv "/Users/SVITY/.nvm/versions/node/v4.3.0/bin/node" "/Users/SVITY/.nvm/versions/node/v4.3.0/bin/npm" "install" "--save-dev" "identity-obj-proxy"
npm ERR! node v4.3.0
npm ERR! npm  v2.14.12
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^15.1.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.1.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.14.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.14
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.13
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0-0
npm ERR! peerinvalid Peer [email protected] wants react@^15.1.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.1.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.1.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.12.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0-0
npm ERR! peerinvalid Peer [email protected] wants react@^0.12.0 || ^0.13.0 || ^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.14.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.5.0
npm ERR! peerinvalid Peer [email protected] wants [email protected] || 0.14.x || ^15.0.0-0 || 15.x

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/SVITY/www/yellow.team/pavemint/pavemint-web/npm-debug.log