keyz / keyz/identity-obj-proxy

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

Open
#12 5 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
507
Forks
19
PR merge metrics
No merged PRs in 30d

Description

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...

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with samples/react-jest-testing/src/webparts/iceCreamShop/test/part1EnzymeBasics.test.ts and the IcecreamShop component’s render method, then run npm test after adding the described snapshot and log. Inspect the Jest configuration and identity-obj-proxy behavior for the SCSS import; done means the log contains the style value and the snapshot includes the expected class attributes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, scss, webpack
Domain
frontend, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.