Jest "not allowed to reference out of scope variables" for typescript types

[sampsonjoliver]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Environment

Yarn 1.10.1 on Windows 10
CRA 2.1
Node 8.10.0

Steps to Reproduce

1. Init a CRA using typescript yarn create-react-app <name> --typescript
2. In App.test.tsx, mock a package, specifying a type argument in the mock value

type MyType = {};

jest.mock('./index', () => {
  return {
    index: (foo: MyType ) => foo
  };
});

it('renders without crashing', () => {
  ...
});

3. Run tests yarn test

Expected Behavior

Typescript and all type information to be removed/ignored during runtime by the test runner.

Actual Behavior

It seems like the babel-plugin-jest-hoist doesn't play with babel's typescript compiler, and is being fed sources that still have type information attached while it's running. Which would be a-okay, except that Jest gets angry any time something is referenced inside a mock function that doesn't start with mock<TheThing>.

This might be a babel issue rather than a CRA issue - but raising it here as this is behaviour that works in react-scripts-ts - probably thanks to the way ts-jest loads the tests - but doesn't work with CRA 2.1.

Here's the output from jest

babel-plugin-jest-hoist: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
    Invalid variable access: MyType

    Whitelisted objects: Array, ArrayBuffer, Boolean, DataView, Date, Error, EvalError, Float32Array, Float64Array, Function, Generator, GeneratorFunction, Infinity, Int16Array, Int32Array, Int8Array, InternalError, Intl, JSON, Map, Math, NaN, Number, Object, Promise, Proxy, RangeError, ReferenceError, Reflect, RegExp, Set, String, Symbol, SyntaxError, TypeError, URIError, Uint16Array, Uint32Array, Uint8Array, Uint8ClampedArray, WeakMap, WeakSet, arguments, console, expect, isNaN,
jest, parseFloat, parseInt, require, undefined, DTRACE_NET_SERVER_CONNECTION, DTRACE_NET_STREAM_END, DTRACE_HTTP_SERVER_REQUEST, DTRACE_HTTP_SERVER_RESPONSE, DTRACE_HTTP_CLIENT_REQUEST, DTRACE_HTTP_CLIENT_RESPONSE, COUNTER_NET_SERVER_CONNECTION, COUNTER_NET_SERVER_CONNECTION_CLOSE, COUNTER_HTTP_SERVER_REQUEST, COUNTER_HTTP_SERVER_RESPONSE, COUNTER_HTTP_CLIENT_REQUEST, COUNTER_HTTP_CLIENT_RESPONSE, global, process, Buffer, clearImmediate, clearInterval, clearTimeout, setImmediate, setInterval, setTimeout.
    Note: This is a precaution to guard against uninitialized mock variables. If it is ensured that the mock is required lazily, variable names prefixed with `mock` (case insensitive) are permitted.

Solution currently is to either not include type information inside of the jest.mock(...) call, or to rename the type

type mockMyType = {};

jest.mock('./index', () => {
  return {
    index: (foo: mockMyType ) => foo
  };
});

it('renders without crashing', () => {
  ...
});

[ianschmitz]

Some reference issues:

facebook/react-native#19120
jestjs/jest#2567

[iansu]

Can you try the latest release and see if this has improved? If not please open a new issue.