Issues when running tests with Jest

[Andreeh]

Hi and thanks for a nice plugin!

I have some issues when trying to setup jest with my project. To confirm my issues i cloned your example, installed jest and created a test:

import App from '../App';

describe('App', () => {
    it('should render the app', () => {});
});

Notice that I don't even use the App in my test, but only by importing the component (which contains some antd imports) it causes this error:

` FAIL src/components/tests/App.test.js
● Test suite failed to run

/Users/andree/Documents/Hobby/antd-scss-theme-plugin/example/node_modules/antd/lib/style/index.less:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import "./themes/default";
                                                                                         ^

SyntaxError: Invalid or unexpected token

  29 |     </FormItem>
  30 |
> 31 |     <FormItem
     | ^
  32 |       label="Enable"
  33 |       labelCol={{ span: 8 }}
  34 |       wrapperCol={{ span: 8 }}

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
  at Object.<anonymous> (node_modules/antd/lib/button/style/index.js:3:1)
  at Object.<anonymous> (src/components/App.jsx:31:1)

Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.249s
Ran all test suites.
error Command failed with exit code 1.`

Do you have any idea what's going on?

If I uncomment the App import in my test, the test completes (duuh :D)

Thanks!

[prncc]

Glad you figured it out!

[Andreeh]

Thanks, realized it was an issue with webpack and my loaders :)

Allthough I have another question. I'd like to use styled components in my app. Is there a smooth way to get access to all the antd variables in the JS so that I can use them in my styled components?

[prncc]

To get all of them you have to modify the plugin (or use similar solution) to export a file with all the values in a dictionary :)

If you are willing to pick through the ones you want, you can do something like

@import 'theme';

:export {
  paddingLg: $padding-lg;
}

Just a ping since it's been a while here: @Andreeh

[gabi04]

Thanks, realized it was an issue with webpack and my loaders :)

how did you solve it?