Jest: `jest.mock ()` के मॉड्यूल कारखाने को किसी भी आउट-ऑफ-स्कोप चर को संदर्भित करने की अनुमति नहीं है

आपको यह करने की आवश्यकता है:

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

यह एक बग हुआ करता था जिसे हमने ठीक किया था। एक नकली में आपको केवल स्थानीय रूप से चीजों की आवश्यकता हो सकती है और आपको बाहरी चरों तक पहुंचने की अनुमति नहीं है।

यह समझाने के लिए कि क्यों: jest.resetModules() के साथ आप वर्तमान में उपलब्ध सभी मॉड्यूल को रीसेट कर सकते हैं, इसलिए जब आप आवश्यकता को कॉल करते हैं, तो आपको प्रत्येक मॉड्यूल का एक नया संस्करण मिलेगा। यदि आप शीर्ष स्तर से रिएक्ट का उपयोग करते हैं, तो आपके पास रिएक्ट की संभावित रूप से दो प्रतियां होंगी।

आह हा, यही वह बिट है जिस पर मैं विचार नहीं कर सका। धन्यवाद!

यह एक प्रयोग ठीक है और इसके लिए एक एस्केप हैच है। अपने वेरिएबल को कॉल करें mockFoo ।

लेकिन, अगर मेरे पास कई मॉक हैं:

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

क्या मुझे हर एक मॉक में const React = require('React'); डालना होगा?

हां।

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

यदि कोई इसे कॉपी करता है और इसे सीआई (सर्कल/गिटलैब) में विफल देखता है, न कि उनके स्थानीय, तो सुनिश्चित करें कि React एक लोअरकेस है react

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

@cpojer मैं __dirname चर का उपयोग करना चाहता हूं, इसकी भी अनुमति नहीं है, मैं इसे कैसे प्राप्त कर सकता हूं?
मैं पर्यावरण से जुड़े पथ का उपयोग नहीं करना चाहता, जैसे /Users/xx/project

@cpojer मैं वास्तव में आपकी व्याख्या नहीं समझता:

यदि आप शीर्ष स्तर से रिएक्ट का उपयोग करते हैं, तो आपके पास रिएक्ट की संभावित रूप से दो प्रतियां होंगी।

अगर मुझे स्थानीय रूप से प्रतिक्रिया की आवश्यकता है, तो मेरे पास स्थानीय प्रतिक्रिया की दो प्रतियां भी होंगी, है ना?

केवल अगर आप दोनों के बीच jest.resetModules() कॉल करते हैं तो कॉल की आवश्यकता होती है।

आप इस काम को ES6 मॉड्यूल के साथ कैसे करते हैं, जिसे फंक्शन स्कोप के अंदर नहीं रखा जा सकता है?

आप import फ़ंक्शन का उपयोग कर सकते हैं, उदाहरण के लिए https://github.com/airbnb/babel-plugin-dynamic-import-node

@SimenB धन्यवाद ... क्या आप एक उदाहरण दे सकते हैं? मैं टाइपस्क्रिप्ट का उपयोग कर रहा हूं जो गतिशील आयात का समर्थन करता है लेकिन मुझे यह स्पष्ट नहीं है कि यह कैसे काम करेगा क्योंकि तब नकली कार्यान्वयन एसिंक बन जाता है, क्या जेस्ट जानता है कि परीक्षण मामलों को जारी रखने से पहले नकली को हल करने के लिए कैसे इंतजार करना है?

बस वादे का इंतजार है।

let myDep;

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

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

पता नहीं यह टाइपप्रति के साथ कैसा दिखता है, लेकिन बहुत अलग नहीं होना चाहिए

मुझे एक उदाहरण के अंदर 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

मैं बैबेल-प्लगइन-ट्रांसफॉर्म-रीजेनरेटर का उपयोग कर रहा हूं। मैं इस मामले में " 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));
});

परीक्षण के कुछ हिस्सों को एसिंक आईआईएफई में लपेटना और परीक्षण समारोह के सामने async को हटाने से जेस्ट त्रुटि नहीं फेंकता है:

 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.doMock jest.mock उपयोग करने से मुझे मदद मिली है।

अभी तक पूरी तरह से निश्चित नहीं है क्योंकि अब अन्य चीजें विफल हो रही हैं (😄) लेकिन ऐसा लगता है कि यह वास्तव में मदद करता है, हां। धन्यवाद! मैं

कोई विचार क्यों doMock काम करता है और mock नहीं करता है? मेरे लिए अजीब बात यह भी थी कि अगर मैं चर को "MockedComponent" नाम से रखता हूं तो मुझे एक त्रुटि मिली, लेकिन जब मैंने "mockedComponent" डाला तो कोई त्रुटि नहीं थी, लेकिन संदर्भ "अपरिभाषित" था।

'jest.mock' कॉल्स 'इट' कॉल्स से एक प्रीप्रोसेसर द्वारा बाहरी क्लोजर में ले जाया जाता है और यह बहुत अच्छी तरह से काम नहीं करता है। 'jest.doMock' कॉल प्रीप्रोसेसर द्वारा प्रभावित नहीं होते हैं।

मैं इस समस्या को पूरा करता हूं जब मैं nodejs 10.0.0 के साथ जेस्ट चलाता हूं, बस डाउनग्रेड किया गया नोड संस्करण काम करता है।

@ सूनताओ मैं इसे पुन: पेश नहीं कर सकता, क्या आप एक छोटा प्रजनन स्थापित करने में सक्षम हैं?

@ सिमेनबी
आपके त्वरित उत्तर के लिए धन्यवाद, लेकिन जब मैं इसे node v10 के साथ पुन: पेश करने का प्रयास करता हूं, तो मैंने पाया कि सभी परीक्षण ठीक काम करते हैं, मुझे लगता है कि समस्या अन्य कारणों से हो सकती है, और जब मैं नोडज को पुनर्स्थापित करता हूं तो मैंने उन्हें खो दिया।

नोडज 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 के साथ बेबेल-जेस्ट को अपग्रेड करने से मेरे लिए यह त्रुटि ठीक हो गई।

गुगलिंग करते समय मैं बस इस पर ठोकर खाई और ऐसा लगता है कि मैंने त्रुटि संदेश में इस महत्वपूर्ण पंक्ति को हर किसी के साथ याद किया है:

_यदि यह सुनिश्चित किया जाता है कि नकली आलस्य की आवश्यकता है, तो 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",

और बेबेल स्वयं को कॉन्फ़िगर करता है:

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 }]
  ]
}

ऐसा लगता है कि इस तरह की समस्या अभी भी मौजूद है और अब वर्कअराउंड भी प्रतिक्रिया ऐप एप्लिकेशन बनाने में मदद नहीं करते हैं

`
संदर्भ त्रुटि: मॉककंपोनेंट परिभाषित नहीं है

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

`

@khrysyn
Jest स्वचालित रूप से jest.mock कॉल को मॉड्यूल के शीर्ष पर फहराएगा।
इसलिए आपका mockComponent const अभी तक परिभाषित नहीं किया गया है जब jest.mock चलता है।

इस "मुद्दे/सुविधा" के आसपास जाने के लिए, मैं इसे 2 चरणों में करता हूं:

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

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

@khrysyn
Jest स्वचालित रूप से jest.mock कॉल को मॉड्यूल के शीर्ष पर फहराएगा।
इसलिए आपका mockComponent const अभी तक परिभाषित नहीं किया गया है जब jest.mock चलता है।

इस "मुद्दे/सुविधा" के आसपास जाने के लिए, मैं इसे 2 चरणों में करता हूं:

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

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

क्या ये वाकई सही है? जैसा कि @nckblu पहले ही ऊपर उल्लेख किया गया है, 'नकली' से शुरू होने वाले चर अपवाद के रूप में उपलब्ध होने चाहिए। और 'mockComponent' उस अपवाद में आना चाहिए, है ना?

इस बीच, यदि आप डिबग स्टेटमेंट जोड़ने के लिए वर्कअराउंड चाहते हैं जैसे कंसोल.लॉग ('चेकिंग...'), कंसोल.लॉग को ग्लोबल के साथ उपसर्ग करें ताकि यह काम कर सके।

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