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

[Link631]

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

[Link631]

I solved my problem by implementing a custom proxy. The custom proxy requires the compiled js and iterates over the keys and sets key = key.

Furthermore it returns the Object under the requested key.

Now the keys of my scss are being set during the testrun.

If there is another way, how to make this standard proxy from this repository work, I would kindly ask for some advice. If it is really not working in this szenario, I could provide my solution.

Regards.

[etiennejcharles]

@Link631 If possible provide the solution you did so that other people encountering the issue might come here and find what you did

[andrewfritz86]

@Link631 +1 - would love to see your solution

[Link631]

Oh... it was long long time ago...

Basicly I was doing something like this

https://github.com/routablehq/jest-scss-transform

I wrote a custom transform which returned the scss class keys. For example if you have following scss variables:

$brandPrimary: #000000;
$brandSecondary: #ffffff;

:export {
brandPrimary: $brandPrimary;
brandSecondary: $brandSecondary;
}

Then the export of my transformation looked like this:

{
brandPrimary: "brandPrimary",
brandSecondary: "brandSecondary"
.....
}

After that i found my classes and values within my snapshots.

Off course, you do not check if the content of brandPrimary is set correctly within the scss, but you do check, if your html components do have the correct css classes set....

[andrewfritz86]

Thanks!