Storybook: ReferenceError: jest is not defined

Question

I have around 8-9 unit tests build on Jest-enzyme and running on storybook. All of these tests runs and pass successfully using jest cli but when using storybook it throws error.

jest is not defined
ReferenceError: jest is not defined
    at Module. (http://localhost:9010/main.b25dbb30a24ed968ce5a.bundle.js:596:1)
    at Module../src/components/__tests__/inspectionType.stories.js (http://localhost:9010/main.b25dbb30a24ed968ce5a.bundle.js:620:30)
    at __webpack_require__ (http://localhost:9010/runtime~main.b25dbb30a24ed968ce5a.bundle.js:785:30)
    at fn (http://localhost:9010/runtime~main.b25dbb30a24ed968ce5a.bundle.js:151:20)
    at webpackContext (http://localhost:9010/main.b25dbb30a24ed968ce5a.bundle.js:444:9)
    at http://localhost:9010/main.b25dbb30a24ed968ce5a.bundle.js:31:34
    at Array.forEach ()
    at loadStories (http://localhost:9010/main.b25dbb30a24ed968ce5a.bundle.js:31:14)
    at http://localhost:9010/vendors~main.b25dbb30a24ed968ce5a.bundle.js:5951:24
    at render (http://localhost:9010/vendors~main.b25dbb30a24ed968ce5a.bundle.js:3965:13)

Now when I go to the story inspectionType.stories.js The code is -

import React, { useState as useStateMock } from "react";
import expect from "expect";
import { mount } from "enzyme";
// import jest from "jest";

import { storiesOf, describe, it, specs } from "../../../.storybook/facade";

import Root from "../../root";
import InspectionType from "../instant-inspection/inspectionType";
import consumerSchema from "./mock-consumer-schema.json";
import "../instant-inspection/index.scss";

const getElement = () => {
  return (
    
      
    
  );
};

jest.mock("react", () => ({   //The part throwing error//
  ...jest.requireActual("react"),
  useState: jest.fn(),
}));

storiesOf("Inspection Type Page", module).add("Inspection Type component", () => {
  specs(() =>
    describe("Inspection page", () => {
      localStorage.setItem("consumerSchemaSelected", JSON.stringify(consumerSchema));
      const setState = jest.fn();
      useStateMock.mockImplementation((init) => [init, setState]);
      it("should render a primary button to open a sample report", () => {
        const wrapper = mount(getElement());

        expect(
          wrapper
            .find(".primary")
            .at(0)
            .text()
        ).toEqual(" VIEW SAMPLE REPORT");
      });

      it("should render a button with text buy now", () => {
        const wrapper = mount(getElement());

        expect(
          wrapper
            .find(".primary")
            .at(1)
            .text()
        ).toEqual("Buy Now");
      });

      it("Should simulate a state change on buy now button", () => {
        const wrapper = mount(getElement());

        wrapper
          .find(".primary")
          .at(1)
          .props()
          .onClick();

        expect(setState).toHaveBeenCalledWith(true);
      });
    })
  );
  return getElement();
});

If I try to to import jest which is right now commented storybook doesn't build and throws the error -

ERROR in ./node_modules/jest-worker/build/workers/NodeThreadsWorker.js
Module not found: Error: Can't resolve 'worker_threads' in 'C:\Users\ATIN\Desktop\client master\client-2.0
eact-ui
ode_modules\jest-worker\build\workers'
 @ ./node_modules/jest-worker/build/workers/NodeThreadsWorker.js 29:15-40
 @ ./node_modules/jest-worker/build/WorkerPool.js
 @ ./node_modules/jest-worker/build/index.js
 @ ./node_modules/@jest/core/node_modules/jest-haste-map/build/index.js
 @ ./node_modules/@jest/core/node_modules/jest-runtime/build/index.js
 @ ./node_modules/@jest/core/node_modules/jest-jasmine2/build/index.js
 @ ./node_modules/@jest/core/node_modules/jest-config/build/normalize.js
 @ ./node_modules/@jest/core/node_modules/jest-config/build/index.js
 @ ./node_modules/@jest/core/build/SearchSource.js
 @ ./node_modules/@jest/core/build/jest.js
 @ ./node_modules/jest/build/jest.js
 @ ./src/components/__tests__/inspectionType.stories.js
 @ ./src/components sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

Been trying to figure out how to solve the error but I am stuck.

EDIT: I resolved the error Jest is not defined by importing import "jest-enzyme"; but now I get expect is not defined. Even though I have imported expect.

user_4091841 · Answer

Try doing what Joe Lloyd recommended which is adding the @storybook/addon-jest to your config file and that should do it.

# config.js
import { withTests } from '@storybook/addon-jest';

...

addDecorator(withTests({ results, filesExt: '\.(test|story).tsx?$' }));

For those stating that jest shouldn't be used and not to mix it with the stories, in some cases it is needed, for instance:


   <--- consumes useSomeRandomHook()

In this case you need a way to mock the values returned by useSomeRandomHook if you want to avoid prop drilling.

Storybook: ReferenceError: jest is not defined

1 Answers