Question

我有大约8-9个基于Jest酶并在故事书上运行的单元测试。所有这些测试都可以使用jest cli运行并成功通过，但是使用Storybook时会引发错误。

If (PDF opened){
  driver.context("NATIVE_APP");
 driver.navigate().back();
}else{
 do nothing
  }

现在，当我转到故事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进行定义的问题，但是现在我没有期望得到定义。即使我已经导入了期望。

Answer 1

尝试执行Joe Lloyd建议的操作，即将@storybook/addon-jest添加到您的配置文件中，并且应该这样做。

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

...

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

对于那些说不应该使用开玩笑并且不将其与故事混合的人来说，在某些情况下是必需的，例如：

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

在这种情况下，如果您想避免道具钻探，则需要一种模拟useSomeRandomHook返回的值的方法。

故事书：ReferenceError：玩笑未定义

1 个答案: