Jest: `jest.mock()`의 모듈 팩토리는 범위를 벗어난 변수를 참조할 수 없습니다.

당신은 이것을 할 필요가 있습니다:

jest.mock(`Picker`, () => {
  const React = require('react');
});

이것은 우리가 수정한 버그였습니다. 모의에서는 로컬에서만 요구할 수 있으며 외부 변수에 액세스할 수 없습니다.

이유를 설명하려면: jest.resetModules() 를 사용하면 현재 사용 가능한 모든 모듈을 재설정할 수 있으므로 require를 호출하면 각 모듈의 새 버전을 얻게 됩니다. 최상위 레벨에서 React를 사용한다면 잠재적으로 두 개의 React 사본을 갖게 될 것입니다.

아하, 그건 내가 확신할 수 없는 부분이었다. 감사 해요!

이 용도는 괜찮고 탈출용 해치가 있습니다. mockFoo 변수를 호출합니다.

그러나 여러 모의가있는 경우 :

jest.mock('./OfferList', () => 'OfferList');
jest.mock('./OfferHeader', () => 'OfferHeader');
jest.mock('./OfferHiredModal', () => 'OfferHiredModal');

모든 단일 모의에 const React = require('React'); 를 넣어야 합니까?

네.

jest.mock(`Picker`, () => {
  const React = require('React');
});

누군가 이것을 복사하여 붙여넣고 로컬이 아닌 CI(circle/gitlab)에서 실패하는 것을 보는 경우 React 가 소문자 react 인지 확인하십시오.

jest.mock(`Picker`, () => {
  const React = require('react');
});

@cpojer __dirname 변수를 사용하고 싶은데 허용되지 않는데 어떻게 얻을 수 있나요?
/Users/xx/project 와 같은 환경 관련 경로를 사용하고 싶지 않습니다.

@cpojer 나는 당신의 설명을 정말로 이해하지 못합니다.

최상위 레벨에서 React를 사용한다면 잠재적으로 두 개의 React 사본을 갖게 될 것입니다.

로컬에서 React가 필요한 경우 로컬 React 사본도 두 개 갖게 됩니다. 맞죠?

둘 사이에 jest.resetModules() 를 호출하는 경우에만 호출이 필요합니다.

함수 범위 안에 넣을 수 없는 ES6 모듈에서 이것을 어떻게 작동시키나요?

예를 들어 https://github.com/airbnb/babel-plugin-dynamic-import-node 와 함께 import 기능을 사용할 수 있습니다.

@SimenB 감사합니다... 예를 들어주실 수 있나요? 동적 가져오기를 지원하는 TypeScript를 사용하고 있지만 모의 구현이 비동기화되기 때문에 이것이 어떻게 작동하는지 확실하지 않습니다. Jest는 테스트 케이스를 계속하기 전에 모의가 해결될 때까지 기다리는 방법을 알고 있습니까?

약속만 기다리세요.

let myDep;

beforeEach(async () => {
  jest.resetModules();

  myDep = await import('./some-modules.js');
})

typescript로 어떻게 보이는지 모르지만 너무 다르지 않아야합니다.

예제 내에서 ES6 구문을 사용하여 함수를 조롱하는 데 문제가 있습니다.

/**
 * @jest-environment jsdom
 */

import SagaTester from "redux-saga-tester";
import supportRequests from "sagas/support_requests";
import reducers from "reducers";

import { fetched } from "actions/support_requests";

describe("success", () => {
  it("sends the message via connection", async () => {
    const sagaTester = new SagaTester({
      reducers: reducers,
      initialState: {
        router: { location: { pathname: "/support_requests" } },
        supportRequests: null,
        authenticated: true,
        currentUser: { isSupportAgent: true },
      },
    });
    jest.mock("sagas/oauth", () => {
      return {
        ...require.requireActual("sagas/oauth"),
        callFetch: function* () {
          return { ok: true, json: () => Promise.resolve({ support_requests: [], meta: { pagination: {} } }) };
        },
      };
    });
    sagaTester.start(supportRequests);
    await sagaTester.waitFor(fetched);
  });
});

확산 연산자(...) 및 생성기 함수는 바벨에 의해 _extends 및 regeneratorRuntime 를 사용하여 액세스할 수 없는 것으로 변환됩니다.

babel-plugin-jest-hoist: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
    Invalid variable access: _extends
    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, expect, jest, require, undefined, console, DTRACE_NET_SERVER_CONNECTION, DTRACE_NET_STREAM_END, DTRACE_HTTP_SERVER_REQUEST, DTRACE_HTTP_SERVER_RESPONSE, DTRACE_HTTP_CLIENT_REQUEST, DTRACE_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` are permitted.

이전에 문제를 경험한 사람이 있습니까? 나는 최신 농담을 사용합니다.

다음과 같은 오류가 발생합니다.

Invalid variable access: _asyncToGenerator

babel-plugin-transform-regenerator를 사용하고 있습니다. 이 경우 " jest.mock() 의 모듈 팩토리"가 "범위를 벗어난 변수를 참조하는 것이 허용되지 않음"에 대해 불평하지 않으려면 어떻게 해야 합니까?

// 편집하다:
전체 테스트는

it('should request data via API', async () => {
    const store = mockStore({ fields: initialState });
    jest.resetModules();
    jest.mock('services/api-client', () => ({
        getFieldsByFarm: async () => {
            return [{ field: {} }];
        },
    }));
    const Actions = require('./actions');
    const expected = [
        { type: 'FIELDS/REQUEST' },
        { type: 'FIELDS/RECEIVE', payload: { items: [{ field: {} }], didInvalidate: false },},
    ];
    await store.dispatch(Actions.getFieldsByFarm());
    const dispatchedActions = store.getActions();
    expect(dispatchedActions[0]).toEqual(expected[0]);
    expect(dispatchedActions[1].payload).toEqual(expect.objectContaining(expected[1].payload));
});

비동기 IIFE에서 테스트의 일부를 래핑하고 테스트 함수 앞의 async 를 제거하면 jest가 오류를 throw하지 않습니다.

 it('should request data via API', (done) => {
    const store = mockStore({ fields: initialState });
    jest.resetModules();
    jest.mock('services/api-clients/nana', () => ({
        getFieldsByFarm: async () => {
            return [{ field: {} }];
        },
    }));
    const Actions = require('./actions');
    (async () => {
        const expected = [
            { type: 'FIELDS/REQUEST' },
            {
                type: 'FIELDS/RECEIVE',
                payload: { items: [{ field: {} }], didInvalidate: false },
            },
        ];
        await store.dispatch(Actions.getFieldsByFarm());
        const dispatchedActions = store.getActions();
        expect(dispatchedActions[0]).toEqual(expected[0]);
        expect(dispatchedActions[1].payload).toEqual(expect.objectContaining(expected[1].payload));
        done();
    })();
});

$#$ jest.mock jest.doMock 를 사용하는 것이 도움이 되었습니다.

지금은 다른 것들이 실패하고 있기 때문에 아직 완전히 확신할 수 없지만( 😄 ) 정말 도움이 되는 것 같습니다. 그렇습니다. 감사 해요! 🙂

doMock 는 작동하고 mock 는 작동하지 않는 이유를 알고 계십니까? 나에게 이상한 점은 "MockedComponent"라는 이름의 변수를 넣으면 오류가 발생했지만 "mockedComponent"를 넣을 때 오류가 없었지만 참조는 "정의되지 않음"이었습니다.

'jest.mock' 호출은 'it' 호출에서 전처리기에 의해 외부 클로저로 이동되며 잘 작동하지 않습니다. 'jest.doMock' 호출은 전처리기의 영향을 받지 않습니다.

nodejs 10.0.0 로 jest를 실행할 때 이 문제가 발생합니다. 다운그레이드된 노드 버전 이 작동합니다.

@Soontao 재생이 안되는데 작은 재생산을 설정할 수 있나요?

@시멘비
빠른 답변 감사합니다. 하지만 node v10 를 사용하여 이를 재현하려고 하면 모든 테스트가 제대로 작동하는 것으로 나타났습니다. 문제가 다른 이유로 인해 발생한 것으로 생각하고 nodejs를 다시 설치할 때 손실되었습니다.

nodejs 10.0.0으로 실행할 때 동일한 문제

 /xxx/node_modules/react-native/jest/setup.js: babel-plugin-jest-hoist: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
    Invalid variable access: console
    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, expect, jest, 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, 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` are permitted.

      at invariant (node_modules/babel-plugin-jest-hoist/build/index.js:14:11)
      at newFn (node_modules/babel-traverse/lib/visitors.js:276:21)
      at NodePath._call (node_modules/babel-traverse/lib/path/context.js:76:18)
      at NodePath.call (node_modules/babel-traverse/lib/path/context.js:48:17)
      at NodePath.visit (node_modules/babel-traverse/lib/path/context.js:105:12)
      at TraversalContext.visitQueue (node_modules/babel-traverse/lib/context.js:150:16)

그것은 노드 10과 아무 관련이 없습니다. 단지 화이트리스트에 console 가 없다는 것뿐입니다. 홍보 환영합니다! 수동 화이트리스트 대신 globals 모듈을 사용해야 합니다...

여기에 마지막으로 수정된 것: #6075

yarn add --dev babel-jest babel-core regenerator-runtime 로 babel-jest를 업그레이드하면 이 오류가 수정되었습니다.

나는 인터넷 검색을 하는 동안 이것을 우연히 발견했고 다른 모든 사람들과 함께 오류 메시지에서 이 중요한 줄을 놓친 것 같습니다.

_mock이 느리게 요구되는 것이 확인되면 mock 접두사가 붙은 변수 이름이 허용됩니다._

조롱하려는 항목의 이름을 변경하여 YourComponentName을 조롱 하십시오.

테스트에서 tsx 지원을 추가하기 위해 내 jest.conf에 해당 코드를 추가한 후 이 문제가 발생합니다(해당 코드가 없으면 내 spec.tsx 파일에 tsx를 작성할 수 없습니다.

  globals: {
    jasmine: true,
+   'ts-jest': {
+     babelConfig: true
+   }
  }

module.exports = {
  // eslint-disable-next-line no-undef
  rootDir: path.resolve(__dirname, '../'),
  roots: ['<rootDir>/src'],
  verbose: false,
  moduleFileExtensions: ['ts', 'tsx', 'vue', 'js', 'jsx', 'json'],
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(ts|js)x?$',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.(js|jsx)?$': 'babel-jest',
    '^.+\\.tsx?$': 'ts-jest'
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/(?!lodash-es)'],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFilesAfterEnv: ['<rootDir>/test/jest.init.ts'],

  // run tests with --coverage to see coverage
  coverageDirectory: '<rootDir>/test/coverage',
  coverageReporters: ['html', 'text-summary'],
  collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx,vue}', '!**/node_modules/**'],

  globals: {
    jasmine: true,
    'ts-jest': {
      babelConfig: true
    }
  }
}

내가 얻은 오류:

   babel-plugin-jest-hoist: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
    Invalid variable access: _debounce
    Whitelisted objects: Array, ArrayBuffer, Boolean, DataView, Date, Error, EvalError, Float32Array, Float64Array, Function, Generator, GeneratorFunction, Infinity, Int16Arra
y, Int32Array, Int8Array, InternalError, Intl, JSON, Map, Math, NaN, Number, Object, Promise, Proxy, RangeError, ReferenceError, Reflect, RegExp, Set, String, Symbol, SyntaxEr
ror, TypeError, URIError, Uint16Array, Uint32Array, Uint8Array, Uint8ClampedArray, WeakMap, WeakSet, arguments, console, expect, isNaN, jest, parseFloat, parseInt, require, un
defined, 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_CLIEN
T_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 inse
nsitive) are permitted.

코드 자체:

const DEBOUNCE_DELAY = 10
const _debounce = jest.requireActual('lodash-es/debounce').default
jest.mock('lodash-es/debounce', () =>
  jest.fn((fn) => _debounce(fn, DEBOUNCE_DELAY))
)

매직 넘버와 인라인 임포트로 다시 작성해야 했습니다.

jest.mock('lodash-es/debounce', () =>
  jest.fn((fn) => jest.requireActual('lodash-es/debounce').default(fn, 10))
)

전역( 'ts-jest': { babelConfig: true } ) 코드에서 해당 구성 없이는 잘 작동했습니다. 그러나 구성에 해당 줄이 없으면 tsx로 테스트를 실행할 수 없었고 해당 오류에 직면했습니다.

    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:

    C:\Users\Alend\vue-project\src\my-component\MyComponent.spec.tsx:20
                            render: function () { return <div id="foo">Foo</div>; }
                                                         ^

package.json의 일부 버전:

"@babel/core": "^7.4.5",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"ts-jest": "24.0.2",

babel 구성 자체:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: 'commonjs',
        targets: {
          browsers: ['> 1%', 'last 2 versions', 'not ie <= 11']
        }
      }
    ],
    '@vue/babel-preset-jsx'
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-json-strings',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',
    '@babel/plugin-syntax-dynamic-import',

    ['@babel/plugin-transform-runtime', { corejs: 2 }],
    ['@babel/plugin-proposal-decorators', { legacy: true }]
  ]
}

그러한 문제가 여전히 존재하는 것 같으며 이제 해결 방법도 반응 앱 응용 프로그램을 만드는 데 도움이 되지 않습니다.

`
ReferenceError: mockComponent가 정의되지 않았습니다.

  17 | const mockComponent = () => <div>Mock</div>;
  18 | 
> 19 | jest.mock('./components/Component', () => ({ Component: mockComponent }));

`

@khrysyn
Jest는 jest.mock 호출을 모듈의 맨 위로 자동으로 호이스트합니다.
이것이 jest.mock이 실행될 때 mockComponent const가 아직 정의되지 않은 이유입니다.

이 "문제/기능"을 해결하려면 다음과 같이 2단계로 수행합니다.

jest.mock('./components/Component', () => ({ Component: jest.fn() }));
import { Component } from "./components/Component";

Component.mockImplementation(() => <div>Mock</div>);

@khrysyn
Jest는 jest.mock 호출을 모듈의 맨 위로 자동으로 호이스트합니다.
이것이 jest.mock이 실행될 때 mockComponent const가 아직 정의되지 않은 이유입니다.

이 "문제/기능"을 해결하려면 다음과 같이 2단계로 수행합니다.

jest.mock('./components/Component', () => ({ Component: jest.fn() }));
import { Component } from "./components/Component";

Component.mockImplementation(() => <div>Mock</div>);

이게 정말 맞나요? @nckblu는 이미 위에서 언급했듯이 'mock'으로 시작하는 변수는 예외로 사용할 수 있어야 합니다. 그리고 'mockComponent'는 그 예외에 속해야 합니다. 맞죠?

그 동안, 디버그 문(예: console.log('Checking...'))을 추가하는 해결 방법을 원하면 console.log 앞에 global을 붙여서 작동하도록 하십시오.

global.console.log('global console working')