React Storybook 仅显示三个单元测试

Question

I am facing a very strange situation. I have 9 unit tests that are running perfectly well when I run it through jest command. But when I run storybook it just shows 3 tests out of 9. Storybook version is 5.1.7 .

Test which is showing on storybook - Filter Search Orders -

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

Test not showing on storybook - Menu story -

    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

Okay so I seemed to figure out what was wrong the whole time.

A very stupid mistake by me but I hope it helps anyone who is dealing with same issue.

I checked the console and seems like the fourth story (in order) that I had written had some error and as soon as I resolved that error that story itself and all other story started showing on storybook.

I upgraded my storybook version and seems like all the stories are shown on the UI with errors.