Unable to test solutions built with MGT

[wictorwilen]

Describe the bug When running tests on MGT, for instance using (the very common) Jest framework, all test suites including MGT components fails due to a transformation error - due to MGT being ES6/ESM only. Jest only ships with experimental support for ESM as of now.

This is the shown error:

 ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • 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/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /home/wictor/code/test/mgt-test/mgt-test/node_modules/@microsoft/mgt-react/dist/es6/index.js:7
    export * from './Mgt';
    ^^^^^^

Same or similar issues has already been reported (and closed due to no response, most likely because folks just skipped testing solutions with MGT). See #596, #1320, #110.

To Reproduce Steps to reproduce the behavior:

1. Run npx create-react-app mgt-test
2. Run cd mgt-test
3. Run npm install @microsoft/mgt-react --save
4. Modify App.js so it looks as follows:

import logo from './logo.svg';
import './App.css';
import { Person } from "@microsoft/mgt-react";
function App() {
  return (
    <div className="App">     
        <Person/>
    </div>
  );
}
export default App;

Expected behavior Expectations is for the tests to run without any transformation errors (Jest encountered an unexpected token)

Recommendation I would suggest that MGT either ships both a cjs and es6 version (which would be great for projects that not yet have fully embraced esm) and/or documentation on how to set up the test configuration/transformation with jest and ts-jest.

Environment (please complete the following information):

• OS: Windows 11/WSL2/Ubuntu
• Browser n/a
• Framework React, jest
• Context node 14.7.6
• Version latest
• Provider none

[ghost]

Hello wictorwilen, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[Mimetis]

We are facing the same issue with any Microsoft Graph Toolkit component used within our React application. @sebastienlevert Do you have any workaround to be able to run tests with Jest until it's resolved in the tookit sdk ?

[sebastienlevert]

We are looking into this issue but don't have a solution for now. Adding @Mnickii that has been looking into it in the past.

[janusch]

Mocking the module until the issue is resolved could be a workaround for other tests to pass. @Mimetis

jest.mock('@microsoft/mgt-react', () => ({
  __esModule: true,
  default: 'mocked',
  MgtPersonCard: jest.fn(),
  Person: jest.fn(),
  PersonCardInteraction: jest.fn(),
}));