React Storybook 仅显示三个单元测试

Question

我面临一个非常奇怪的情况。当我通过 jest 命令运行时，我有 9 个单元测试运行非常好。但是当我运行故事书时，它只显示了 9 个测试中的 3 个。故事书版本是 5.1.7。

故事书上显示的测试 - 过滤搜索顺序 -

import React from "react";
import expect from "expect";
import { mount } from "enzyme";
import _ from "lodash";

import Root from "../../root";
import { storiesOf, describe, it, specs, beforeEach, afterEach } from "../../../.storybook/facade";
import FilterSearchOrders from "../search-orders/filter-search-orders";
import ordersFilterOptions from "../search-orders/orders-filters-options";

const filterSearchOrdersInfo = {
  searchedText: "",
  status: "",
  pageNo: 0,
};

const getElement = () => {
  return (
    <Root>
      <FilterSearchOrders
        searchedText={filterSearchOrdersInfo.searchedText}
        status={filterSearchOrdersInfo.status}
        pageNo={filterSearchOrdersInfo.pageNo}
      />
    </Root>
  );
};

storiesOf("Filter Search Orders", module).add("Filter Search Orders", () => {
  specs(() =>
    describe("Test case for filter search order component", () => {
      let wrapper;

      beforeEach(() => {
        wrapper = mount(getElement());
      });

      afterEach(() => {
        wrapper.unmount();
      });

      it("should render an input box for searching", () => {
        expect(wrapper.find(".search-orders-input"));
      });

      it("should render a dropdown with options", () => {
        const dropdownOptions = wrapper.find(".item").map((node) => node.text());
        const items = _.map(ordersFilterOptions, _.property("text"));

        expect(dropdownOptions).toEqual(items);
      });

      it("should render a primary button called search", () => {
        expect(wrapper.find(".primary").text()).toEqual("SEARCH");
      });
    })
  );
  return getElement();
});

故事书上未显示测试 - 菜单故事 -

    import React from "react";
    import expect from "expect";
    import { mount } from "enzyme";
    import _ from "lodash";

    import { DASHBOARDITEMS } from "../menu/menuItems";
    import { storiesOf, describe, it, specs } from "../../../.storybook/facade";
    import NavBar from "../menu";
    import Root from "../../root";

    const getElement = () => {
      return (
        <Root>
          <NavBar items={DASHBOARDITEMS} />
        </Root>
      );
    };

    storiesOf("Menu", module).add("Navigation Bar component", () => {
      specs(() =>
        describe("Main menu", () => {
          it("should render menu", () => {
            const wrapper = mount(getElement());

            expect(wrapper.find(".nestedMenu"));


    });

      it("should render an image to show logo", () => {
        const wrapper = mount(getElement());

        expect(
          wrapper
            .find(".item")
            .at(0)
            .find("img").length > 0
        ).toEqual(true);
      });

      it("should render all links", () => {
        const wrapper = mount(<Root>{getElement()}</Root>);
        const links = wrapper.find("a").map((node) => node.text());
        const items = _.map(DASHBOARDITEMS, _.property("content"));

        expect(links).toEqual(items);
      });
    })
  );
  return getElement();
});

Answer 1

好吧，我似乎一直都在弄清楚出了什么问题。

我犯了一个非常愚蠢的错误，但我希望它能对遇到同样问题的任何人有所帮助。

我检查了控制台，似乎我写的第四个故事（按顺序）有一些错误，一旦我解决了这个错误，这个故事本身和所有其他故事就开始在故事书中显示。

我升级了我的故事书版本，UI 上显示的所有故事似乎都有错误。

React Storybook 仅显示三个单元测试

React Storybook showing only three unit tests

reactjs

jestjs

enzyme

storybook