Question

该组件通过以下方式呈现：

<Editor ref={(editor: any) => api = editor} onLoad={onEditorLoad} projectId={1234} />

我在开玩笑地嘲笑它，如下所示：

jest.mock("react-email-editor", () => ({
    default: () => "Editor",
    __esModule: true,
}));

我需要一种编写“编辑器”模拟的方法，以便它包含引用。我已经有了ref应该返回的结构：

const emailRef = {
    editor: {
        exportHtml: jest.fn().mockImplementation(() => Promise.resolve(emailData)),
    },
};

编辑：

尝试传递default中的模拟组件时出现此错误

const MockEditor: React.FC = () => {
    return (
        <div>Mock Editor</div>
    );
};

jest.mock("react-email-editor", () => ({
    default: () => MockEditor,
    __esModule: true,
}));

    file.js: babel-plugin-jest-hoist: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
    Invalid variable access: MockEditor
    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, 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` are permitted.

      at invariant (node_modules/typescript-babel-jest/node_modules/babel-plugin-jest-hoist/build/index.js:13: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)
      at TraversalContext.visitMultiple (node_modules/babel-traverse/lib/context.js:103:17)

编辑2：我可以执行模拟了，但是调用组件仍然找不到exportHtml函数：

jest.mock("react-email-editor", () => ({
    default: (props: any) => {
        // tslint:disable-next-line: no-shadowed-variable
        const React = require("react");

        const MockEditor: React.FC = () => {
            const emailData = {
                data: {
                    html: "<div>Mock Email</div>",
                },
            };

            const setMergeTags = () => jest.fn();

            // for my test this is still being shown as undefined
            const exportHtml = () => jest.fn().mockImplementation(() => Promise.resolve(emailData));

            return <div>Mock Editor</div>;
        };

        return <MockEditor />;
    },
    __esModule: true,
}));

嘲笑带有ref的第三方组件

0 个答案: