feat: updated Layout.test.js

src/components/layout/Layout.test.js

@@ -1,41 +1,34 @@
-import { mount } from "enzyme";
-import React from "react";
-import Layout from "./Layout";
-import { StyledContent } from "./LayoutStyled";
-import Menu from "./Menu/Menu";
-import { BrowserRouter as Router } from "react-router-dom";
-import { ThemeProvider, createTheme } from "@mui/material";
+import React from 'react';
+import Layout from './Layout';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { ThemeProvider } from '@mui/material';
+import { render, screen } from '@testing-library/react';
+import theme from '../UI/theme';
 
-const theme = createTheme({
- zIndex: {
- drawer: 1200,
- },
-});
+describe('Layout component', () => {
 
-describe("Layout component", () => {
- let wrapper;
+ const TestWrapper = (props) => {
+ return <ThemeProvider theme={theme}>
+ <Router>
+ {props.children}
+ </Router>
+ </ThemeProvider>;
+ };
 
- beforeEach(() => {
- wrapper = mount(
- <ThemeProvider theme={theme}>
- <Router>
- <Layout>
- <div>Test</div>
- </Layout>
- </Router>
- </ThemeProvider>
- );
- });
 
- it("should render Layout component", () => {
- expect(wrapper).toBeTruthy();
- });
+ it('renders correctly', async () => {
+ render(<TestWrapper>
+ <Layout></Layout>
+ </TestWrapper>);
 
- it("should render Menu component", () => {
- expect(wrapper.find(Menu)).toHaveLength(1);
- });
+  //load data
+ await screen.findByAltText(/Greenstand logo/);
+  await screen.findAllByRole('link');
 
- it("should render StyledContent component", () => {
- expect(wrapper.find(StyledContent)).toHaveLength(1);
+ expect(screen.getAllByRole('link')).toHaveLength(3);
+ expect(screen.getByText(/Home/)).toBeInTheDocument();
+ expect(screen.getByText(/Send Tokens/)).toBeInTheDocument();
+ expect(screen.getAllByRole('button')).toHaveLength(3);
  });
+
 });

src/components/layout/Menu/Menu.test.js

@@ -16,7 +16,6 @@ describe('Menu component', () => {
  };
 
  it('renders correctly', async () => {
- //Menu open prop is irrelevant as Layout is responsible for open/close
  render(<TestWrapper>
  <Menu />
  </TestWrapper>);

src/components/layout/Menu/MenuItem/MenuItem.test.js

@@ -16,7 +16,6 @@ describe('MenuItem tests v1', () => {
  };
 
  it('Links are rendered correctly', async () => {
- //MenuItem open prop is irrelevant as Layout is responsible for open/close
  render(
  <TestWrapper>
  <MenuItem />

src/components/layout/Menu/TopMenu/TopMenu.test.js

@@ -19,8 +19,6 @@ describe('TopMenu component', () => {
  <TopMenu />
  </TestWrapper>);
 
- screen.debug();
-
  //logo has loaded
  await screen.findByAltText(/Greenstand logo/);