fetchMock Import failed & can't run test suite with ts-jest

[viT-1]

fetch-mock 8.3.1
jest: 24.9.0
ts-jest: 24.3.0

Using npm run test with jest config:

testMatch: ['**/*.*(spec|test).*(ts|js)'],
transform: {
	'.*?\\.(ts|js)$': 'ts-jest',
},

nothing about fetch in jest setup scripts

My test file for code with default modern browser fetch:

import fetchMock from 'fetch-mock';
fetchMock.mock({
	url: 'begin:/activity/findpoints',
	response: Promise.resolve([
		{ label: 'foo' },
		{ label: 'bar' },
		{ label: 'baz' },
	]),
});

Test suite failed to run with 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:

    testProject\node_modules\fetch-mock\esm\client.mjs:3552
    export default client;
    ^^^^^^

    SyntaxError: Unexpected token export

    > 1 | import fetchMock from 'fetch-mock';
        | ^

      at ScriptTransformer._transformAndBuildScript (../node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (../node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (services/PointSvc/PointSvc.u.spec.ts:1:1)

Trying but isn't working too:

import * as fm from 'fetch-mock';
const { mock: mockFetch, restore: restoreFetch } = fm;
mockFetch({
	url: 'begin:/activity/findpoints',
	response: Promise.resolve([
		{ label: 'foo' },
		{ label: 'bar' },
		{ label: 'baz' },
	]),
});

[viT-1]

jestjs/jest#2550

[viT-1]

kulshekhar/ts-jest#881

[viT-1]

jestjs/jest#4842

[wheresrhys]

Try using npm install fetch-mock-jest@1.1.0-beta.3. It's a wrapper around fetch-mock (exporting the same API and more), and in this beta release I attempt to fix the jest compatibility problem when running in a browser. I'm going to close this issue, but let me know if there are any issues by commenting on wheresrhys/fetch-mock-jest#5

[viT-1]

@wheresrhys
with beta.3 on running tests I have another error:

Test suite failed to run

    TypeError: src\services\PointSvc\PointSvc.u.spec.ts: Emit skipped

      at getOutput (../node_modules/ts-jest/dist/compiler.js:162:23)
      at Object.compile (../node_modules/ts-jest/dist/compiler.js:187:29)
      at TsJestTransformer.process (../node_modules/ts-jest/dist/ts-jest-transformer.js:101:41)
      at ScriptTransformer.transformSource (../node_modules/@jest/transform/build/ScriptTransformer.js:453:35)
      at ScriptTransformer._transformAndBuildScript (../node_modules/@jest/transform/build/ScriptTransformer.js:523:40)
      at ScriptTransformer.transform (../node_modules/@jest/transform/build/ScriptTransformer.js:579:25)

[viT-1]

Sorry, "Emmit skipped" error is same for jest-fetch-mock setup
May be related kulshekhar/ts-jest#766

[viT-1]

@wheresrhys I don't understand how to configure fetchMock from 'fetch-mock-jest' with minimal code for typescript tests: wheresrhys/fetch-mock-jest#6
Please help me.

[viT-1]

@wheresrhys I run tests by npm run test

[wheresrhys]

Could you please share a repo that recreates the issue. It'll really help isolate if this is a fetch-mock, fetch-mock-jest, jest or ts issue

[viT-1]

@wheresrhys
Yes, with jest-fetch-mock test is ok, but with fetch-mock is not.
This commit with trying to migrate to your package.

[wheresrhys]

Please try v9 of this library and reopen the issue if it's still broken