SyntaxError: Unexpected token export with SPFx solution while running Jest - jestjs

Question

I am getting this error:
FAIL src\webparts\crud\__test__\CrudWebPart.test.tsx
● Test suite failed to run
C:\Users\admin\Desktop\github\crud-simple-test\node_modules\#microsoft\sp-http\lib\index.js:12
export { default as HttpClient } from './httpClient/HttpClient';
^^^^^^
SyntaxError: Unexpected token export
54 |
55 | async postTodo() {
> 56 | const value = await this.addItem(this.state.todo);
57 | const action = postTodoCreator(value);
58 | store.dispatch(action)
59 | }
at ScriptTransformer._transformAndBuildScript (node_modules/jest/node_modules/jest-runtime/build/script_transformer.js:316:17)
at Object.<anonymous> (src/webparts/crud/components/Todolist/Todolist.tsx:56:68)
at Object.<anonymous> (src/webparts/crud/components/Crud.tsx:17:70)
console.log src\webparts\crud\components\Store\reducers.ts:27
action type ##redux/INITb.1.9.m.y.8 is not found
Handlebars: Access has been denied to resolve the property "statements" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details
Handlebars: Access has been denied to resolve the property "branches" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details
Handlebars: Access has been denied to resolve the property "functions" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details
Handlebars: Access has been denied to resolve the property "lines" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | Unknown | Unknown | Unknown | Unknown | |
----------|----------|----------|----------|----------|-------------------|
Jest: Coverage data for global was not found.
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 8.522s
Ran all test suites.
testResultsProcessor support is deprecated. Please use jest reporter. See https://github.com/jest-community/jest-junit#usage:
{
"reporters": [
"jest-junit"
]
}
npm ERR! Test failed. See above for more details.
This is strange, because after doing some research I changed my config:
"transformIgnorePatterns": [
"/node_modules/(?!#microsoft/sp-core-library|sp-dialog|sp-http)"
],
Yet this little fix doesn't seem to cut it even though this seems to be what people did to fix similar issues. Is this a Typescript problem or is it something else? And how do I make sure the Typescript compiler does its job?

Answer 1

In my case, I configured package.json so jest ignores all these:
"transformIgnorePatterns": [ "node_modules/(?!(#microsoft/sp-dialog|#microsoft/office-ui-fabric-react-bundle|#microsoft/sp-diagnostics|#microsoft/sp-core-library|#microsoft/sp-http|#microsoft/sp-page-context|#microsoft/sp-dynamic-data|#pnp/sp|#pnp/common|#pnp/odata|#pnp))" ],