Sp-dev-docs: Can't run Jest tests when component uses Dialog

[aslanovsergey]

Category

• [x] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

I use @microsoft/sp-dialog 1.5.1 and SPFx 1.5.1

Expected or Desired Behavior

When I test my component with Jest I get the next error

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    C:\Code\SPFx\mywepart\node_modules\@microsoft\sp-dialog\lib\Dialog.js:7
    import { sealed } from '@microsoft/decorators';
    ^^^^^^

    SyntaxError: Unexpected token import

    > 12 | import Dialog from "@microsoft/sp-dialog/lib/Dialog";

[aslanovsergey]

Very similar thing happens with Guid class

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    C:\Code\SPFx\***\node_modules\@microsoft\sp-core-library\lib\index.js:11
    export { default as _BrowserDetection } from './BrowserDetection';
    ^^^^^^

    SyntaxError: Unexpected token export

       7 | import { connect, Dispatch } from "react-redux";
    >  9 | import { Guid } from "@microsoft/sp-core-library";

[petecuttriss]

Hi Sergei, I just wanted to confirm that I'm seeing the same issue also. Likewise I'm using v1.5.1.

In my case I've added an import for the DisplayMode from the sp-core-library import { DisplayMode } from '@microsoft/sp-core-library'; As soon as I do this my tests begin failing with the same error:

C:\Projects\UserGroupsViewer\node_modules\@microsoft\sp-core-library\lib\index.js:11 export { default as _BrowserDetection } from './BrowserDetection'; ^^^^^^
Pete

[aslanovsergey]

Tried to wite transformIgnorePatterns but didn't help

[crsanghani]

@aslanovsergey Did you come up with a solution to this?

[gosiaborzecka]

I have the same error with jest testing on '@microsoft/sp-core-library':
\node_modules\@microsoft\sp-core-library\lib\index.js:11 export { default as _BrowserDetection } from './BrowserDetection'; ^^^^^^

[aslanovsergey]

@crsanghani Unfortunately no and @microsoft/sp-dialog 1.6.0 doesn't change the situation

[ottwell]

@aslanovsergey any progress? i have the same issue

[fourthgenz28]

I'm also encountering the same error as @gosiaborzecka even after removing all references to Dialog. SPFx v1.5.0

[petecuttriss]

Hi everyone, @aslanovsergey

I did some further research on this and have managed to get my jest tests working but I'm not quite sure yet at what cost.

I took a copy of Velin Georgiev's jest testing sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-jest-testing. This sample is using SFPX v1.6.0.

I did an initial build and ran "npm test" successfully. I then took the "IceCreamShop.tsx" component and added a reference to the Guid class e.g. import { Guid } from '@microsoft/sp-core-library'; I also added a var which generated a new guid in the main render method e.g. var guid: Guid = Guid.newGuid();.

After this change I ran "npm test" once again and got it to fail with the "Unexpected token export" error.

To get the tests running again I then did the following:

1. In the package.json file I changed the "transform" configuration from:
   "^.+\\.(ts|tsx)$": "ts-jest" to
   "^.+\\.(js|ts|tsx)$": "ts-jest".

Note the addition of "js".

1. In the pacakge.json file I added a "transformIgnorePatterns" configuration value: e.g.
   "transformIgnorePatterns": [ "node_modules/(?!(@microsoft/sp-core-library))" ],

2. In the tsconfig.json file, I removed the "declaration" configuration and added an "allowJs" configuration with it's value set to "true".
   "allowJs": true,

Following these changes I was able to run "npm test" again and the tests all ran successfully.

I've been able to replicate these steps using a new project also built using SPFx v1.7.0 with the same results.

I can't say I fully understand the implications of the changes I've made but building, running and testing of my components is now working. Hopefully these changes might further help in figuring out this issue. I need to do some more research to further understand the implications of these changes.

[aslanovsergey]

I had opened an issue in jest project and got an answer.
https://github.com/facebook/jest/issues/6975#issuecomment-435588381

@VesaJuvonen who can look at this issue from SPFx team side?

[Krak86]

Hi everyone, @aslanovsergey

I did some further research on this and have managed to get my jest tests working but I'm not quite sure yet at what cost.

I took a copy of Velin Georgiev's jest testing sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-jest-testing. This sample is using SFPX v1.6.0.

I did an initial build and ran "npm test" successfully. I then took the "IceCreamShop.tsx" component and added a reference to the Guid class e.g. import { Guid } from '@microsoft/sp-core-library'; I also added a var which generated a new guid in the main render method e.g. var guid: Guid = Guid.newGuid();.

After this change I ran "npm test" once again and got it to fail with the "Unexpected token export" error.

To get the tests running again I then did the following:

1. In the package.json file I changed the "transform" configuration from:
   "^.+\\.(ts|tsx)$": "ts-jest" to
   "^.+\\.(js|ts|tsx)$": "ts-jest".

Note the addition of "js".

1. In the pacakge.json file I added a "transformIgnorePatterns" configuration value: e.g.
   "transformIgnorePatterns": [ "node_modules/(?!(@microsoft/sp-core-library))" ],
2. In the tsconfig.json file, I removed the "declaration" configuration and added an "allowJs" configuration with it's value set to "true".
   "allowJs": true,

Following these changes I was able to run "npm test" again and the tests all ran successfully.

I've been able to replicate these steps using a new project also built using SPFx v1.7.0 with the same results.

I can't say I fully understand the implications of the changes I've made but building, running and testing of my components is now working. Hopefully these changes might further help in figuring out this issue. I need to do some more research to further understand the implications of these changes.

For me it works, thanks!

[spvjebaraj]

Hi @petecuttriss
It is not working for me what ever you have shared. Still I am getting the error like "export { default as _BrowserDetection } from './BrowserDetection'".
Please help me on this.

[msft-github-bot]

This issue is being closed as part of an issue list cleanup project. Issues with no activity in the past 6 months that aren't tracked by engineering as bugs were closed as part of this inititive. If this is still an issue, please follow the steps outlined to re-open the issue.