enzyme#render JavaScript Examples

render() {
    let myArray = this.props.reviews;
    
    console.log(this.props.reviews.length);

    return (
      <div className="Reviews">
        <ReviewsHeader stats={this.props.stats} />
        {this.props.reviews.slice(0, 6).map(r => <ReviewEntry review={r} />)}
      </div>
    );
  }

describe("Primary Button", () => {
  it("Renders Primary Button", () => {
    const wrapper = render(<Button title="Primary Button" />);
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Renders Disabled Button", () => {
    const wrapper = render(<Button title="Disabled Button" disabled />);
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Handles button click", () => {
    const mockFunction = jest.fn();
    const wrapper = shallow(
      <Button title="Button Click" onClick={mockFunction} />
    );
    wrapper.simulate("click");
    wrapper.update();
    expect(mockFunction).toBeCalled();
  });
});

test("Header basic test", () => {
  const confStore = {
    _value: "header text",
    underline: true,
    size: 1,
  };

  const view = render(<HtxHeader item={confStore} />);
  const text = view.text();

  expect(text).toBe("header text");
});

describe('Layout', () => {
  it('renders children correctly', () => {
    const store = mockStore(initialState);

    const wrapper = render(
      <App context={{ insertCss: () => {}, store }}>
        <Layout>
          <div className="child" />
        </Layout>
      </App>,
    );
    expect(wrapper.find('div.child').length).to.eq(1);
  });

});

describe("Icon Button", () => {
  it("Renders Primary Button", () => {
    const wrapper = render(<IconButton icon={<DeleteIcon />} />);
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Renders Disabled Button", () => {
    const wrapper = render(<IconButton icon={<DeleteIcon />} disabled />);
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Handles button click", () => {
    const mockFunction = jest.fn();
    const wrapper = shallow(
      <IconButton icon={<DeleteIcon />} onClick={mockFunction} />
    );
    wrapper.simulate("click");
    wrapper.update();
    expect(mockFunction).toBeCalled();
  });
});

describe("Text Field", () => {
  it("Renders default text field", () => {
    const wrapper = render(<TextField label="Label" />);
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Renders required text field", () => {
    const wrapper = render(<TextField label="Label" required={true} />);
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Renders error text field", () => {
    const wrapper = render(<TextField label="Label" error={true} />);
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Renders error with message text field", () => {
    const wrapper = render(
      <TextField label="Label" error={true} errorMessage="error message" />
    );
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Listens for changes", () => {
    const mockFunction = jest.fn();
    const wrapper = shallow(
      <TextField label="Label" onChange={mockFunction} />
    );
    wrapper.simulate("change");
    wrapper.update();
    expect(mockFunction).toBeCalled();
  });
});

describe("Typography", () => {
  it("Renders Default Body", () => {
    const wrapper = render(<Typography>Body</Typography>);
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Renders Body", () => {
    const wrapper = render(<Typography variant="body">Body</Typography>);
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Renders Header", () => {
    const wrapper = render(<Typography variant="header">Header</Typography>);
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Renders Title", () => {
    const wrapper = render(<Typography variant="title">Title</Typography>);
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
  it("Renders Subtitle", () => {
    const wrapper = render(
      <Typography variant="subtitle">Subtitle</Typography>
    );
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
});

describe("Event List Item", () => {
  const data = {
    date: "12:12:!2 12/12/12",
    title: "Test Title",
    type: "Test Type",
  };

  it("Renders the list item", () => {
    const wrapper = render(
      <ThemeProvider theme={baseTheme}>
        <EventListItem eventData={data} />
      </ThemeProvider>
    );
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
});

describe("Add Event", () => {
  it("Renders the Add Event", () => {
    const wrapper = render(
      <ThemeProvider theme={baseTheme}>
        <AddEvent />
      </ThemeProvider>
    );
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
});

describe("Event List", () => {
  const eventDataList = [
    {
      date: "12:12:12 12/12/12",
      title: "Storybook Event",
      type: "Reminder",
    },
    {
      date: "12:12:12 12/12/12",
      title: "Storybook Event",
      type: "Reminder",
    },
    {
      date: "12:12:12 12/12/12",
      title: "Storybook Event",
      type: "Reminder",
    },
  ];
  it("Renders with data", () => {
    const wrapper = render(
      <ThemeProvider theme={baseTheme}>
        <EventList title="Upcoming Events" eventDataList={eventDataList} />
      </ThemeProvider>
    );
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
});

describe("Next Event Banner", () => {
  it("render next event banner", () => {
    const wrapper = render(
      <ThemeProvider theme={baseTheme}>
        <NextEventBanner
          date="12:!2:!2 12/12/12"
          title="Title"
          description="Description"
          type="Type"
        />
      </ThemeProvider>
    );
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
});

describe("Home Template", () => {
  it("Render Home Template", () => {
    const wrapper = render(
      <ThemeProvider theme={baseTheme}>
        <HomeTemplate
          sideNav={<DummyView />}
          banner={<DummyView />}
          content={<DummyView />}
          rightPanel={<DummyView />}
        />
      </ThemeProvider>
    );
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
});

describe("Render the Home Page", () => {
  it("Renders the Home Page", async () => {
    jest.useFakeTimers();
    const wrapper = render(
      <ThemeProvider theme={baseTheme}>
        <HomePage />
      </ThemeProvider>
    );
    await Promise.resolve();
    expect(wrapper).toBeDefined();
    expect(wrapper).toMatchSnapshot();
  });
});

describe("ConfigView Tests", () => {

  afterAll(() => {
    jest.restoreAllMocks();
  });

  test("should successfully render the config component", () => {
    const component = render(<ConfigView />);
    expect(component).toMatchSnapshot();
  });

  test("should successfully call the component did mount when rendering view", () => {
    spyOnFunction(diagnosticSearch, "init", fn => fn());
    spyOnFunction(deviceSearch, "init", fn => fn());
    spyOnFunction(exceptionSearch, "init", fn => fn());
    spyOnFunction(collapse, "initCollapse");
    spyOnFunction(deviceSearch, "loadSavedDeviceConfig", fn => fn());
    spyOnFunction(exceptionSearch, "loadSavedExceptionConfig", fn => fn());
    spyOnFunction(diagnosticSearch, "loadSavedStatusConfig", fn => fn());

    shallow(<ConfigView />);

    expect(collapse.initCollapse).toHaveBeenCalled();
    expect(deviceSearch.loadSavedDeviceConfig).toHaveBeenCalled();
    expect(exceptionSearch.loadSavedExceptionConfig).toHaveBeenCalled();
    expect(diagnosticSearch.loadSavedStatusConfig).toHaveBeenCalled();
  });
});

global.render = render;

wrapper = render(
  <Provider store={store}>
    <Inventory />
  </Provider>
)

global.render = render;

global.render = render;

global.render = render;

global.render = render;

global.render = render;

global.render = render;

global.render = render;

global.render = render;

test("should successfully render the map component", () => {
  const component = render(<MapView />);
  expect(component).toMatchSnapshot();
});

test("should successfully render the component and match screenshot", () => {
  const component = render(<VehicleToggleButtons />);
  expect(component).toMatchSnapshot();
});

test("should successfully render the component and match screenshot", () => {
  const component = render(<StatusToggleButtons />);
  expect(component).toMatchSnapshot();
});

test("should successfully render the component and match screenshot", () => {
  const component = render(<ExceptionToggleButtons />);
  expect(component).toMatchSnapshot();
});

global.render = render;