reactjs - 故事书:ReferenceError: Jest 未定义

Question

我有大约 8-9 个单元测试构建在 Jest-enzyme 上并在 storybook 上运行。所有这些测试都使用 jest cli 运行并成功通过，但在使用故事书时会抛出错误。

jest is not defined
ReferenceError: jest is not defined
    at Module.<anonymous> (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 (<anonymous>)
    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)

现在，当我转到故事 inspectionType.stories.js 时，代码是 -

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 (
    <Root>
      <InspectionType />
    </Root>
  );
};

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();
});

如果我尝试导入现在评论的故事书无法构建并抛出错误的 Jest -

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\react-ui\node_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

一直在尝试找出解决错误的方法，但我被卡住了。

编辑:我解决了错误 Jest is not defined by importing import "jest-enzyme"; 但现在我得到 expect is not defined 。即使我导入了 expect。

Answer 1

尝试按照 Joe Lloyd 的建议，将 @storybook/addon-jest 添加到您的配置文件中，这应该可以做到。

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

...

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

对于那些说不应该使用 Jest 并且不应该将其与故事混在一起的人，在某些情况下是需要的，例如:

<Parent>
  <Child/> <--- consumes useSomeRandomHook()
</Parent>

在这种情况下，如果您想避免 prop drilling，您需要一种方法来模拟 useSomeRandomHook 返回的值。