Error when trying to mock third party library in jest

Question

I'm running into the following error when doing jest.Mock on a third party library. The library in question is react-email-editor.

jest.mock("react-email-editor", () => {
    return {
        Editor: <div>Email Editor</div>,
    };
});

Error with jest.mock

    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: React
    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.

And if I change it todoMock I get this:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Note: since I'm using Typescript and react email editor doesn't have type definitions, I had to create a stub definition file in my project root .types/react-email-editor/index.d.ts as follows:

declare module "react-email-editor";

Edit: List of imports before jest.mock is called

import { act, fireEvent, render } from "@testing-library/react";
import * as React from "react";
import { EmailEditor, IEmailEditorProps } from "../EmailEditor"; // my wrapper around react-email-editor
import Editor from "react-email-editor";

I did like so `import Editor from "react-email-editor". I've read that due to `jest.mock` hoisting, the import has to come after the mock... I've tried that to but no luck. — blankface, Sep 19 '19 at 06:05
Could you edit the question to include the imports in the test leading up to the jest.mock call? — Oluwafemi Sule, Sep 19 '19 at 06:20

score 0 · Answer 1 · answered Sep 19 '19 at 09:42

0

I think it should be:

jest.mock("react-email-editor", () => () => <div>Email Editor</div>);

answered Sep 19 '19 at 09:42

Giorgio Polvara - Gpx

12,268
5
53
55

Does it change if you do `import React from 'react'`? – Giorgio Polvara - Gpx Sep 21 '19 at 14:07

Error when trying to mock third party library in jest

1 Answers1