microsoft-graph-toolkit
microsoft-graph-toolkit copied to clipboard
Unable to test solutions built with MGT
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:
- Run
npx create-react-app mgt-test
- Run
cd mgt-test
- Run
npm install @microsoft/mgt-react --save
- 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
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 🙌
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 ?
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.
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(),
}));
```