Im facing this issue in Sonarqube after pushing my code
How to resolve this issue?
** App.test.js**
import { fireEvent, render, screen } from "@testing-library/react";
import { Provider } from "react-redux";
import App from "./App";
import { Router } from "react-router-dom"
import configureStore from 'redux-mock-store';
import { createHashHistory as createHistory } from 'history';
const mockStore = configureStore([]);
const initialState = {
login: {
access: "access123",
refresh: "refresh123"
},
menu: {
data: [
{
id: 'home',
title: 'Home',
isTvFocus: true,
isActive: true
},
{
id: 'mylist',
title: 'My list',
isTvFocus: false,
isActive: false
},
{
id: 'search',
title: 'Search',
isTvFocus: false,
isActive: false
}
]
},
}
const store = mockStore(initialState);
export const renderWithState = (
ui,
{ initialState, ...renderOptions } = {}
'initialState' is already declared in the upper scope.Why is this an issue?
) => {
const history = createHistory();
const Wrapper = ({ children }) => (
<Provider store={store}><Router history={history}>{children}</Router></Provider>
);
return render(ui, { wrapper: Wrapper, ...renderOptions });
};
jest.mock('./components/Menu',() => () => <div data-testid="menu-id">Home</div> )
test("renders app component with state", () => {
const { getByText, getByTestId } = renderWithState(<App />, { initialState });
screen.debug();
expect(getByText(/Home/i).textContent).toBe("Home");
expect(getByTestId(/menu-id/i)).toBeInTheDocument();
fireEvent.keyDown(getByText(/Home/i), {
key: "ArrowRight",
code: "ArrowRight",
keyCode: 39,
charCode: 39
});
const actions = store.getActions();
const rightAction = actions.filter(obj => obj.type==='RIGHT')
expect(rightAction.length).toEqual(1);
});
it('Should call storeToken', () => {
// const { storeToken } = renderWithState(<App />, { initialState });
// screen.debug();
const res = App.storeToken()
console.log('red', res);
// expect(App.storeToken).toBeTruthy();
// let node = shallow(<App />);
// const getPhoneCompSpy = jest.spyOn(node.instance(), 'storeToken');
// expect(getPhoneCompSpy).toHaveBeenCalled();
});
similar error in menu.test.js
** Menu.test.js **
import { render, screen } from "@testing-library/react";
import { Provider } from "react-redux";
import { Router } from "react-router-dom"
import configureStore from 'redux-mock-store';
import { createHashHistory as createHistory } from 'history';
import Menu from "./Menu"
const mockStore = configureStore([]);
const initialState = {
login: {
access: "access123",
refresh: "refresh123"
},
menu: {},
}
const menu = {
data: [
{
id: 'home',
title: 'Home',
isTvFocus: true,
isActive: true
},
{
id: 'mylist',
title: 'My list',
isTvFocus: false,
isActive: false
},
{
id: 'search',
title: 'Search',
isTvFocus: false,
isActive: false
}
]
}
const store = mockStore(initialState);
export const renderWithState = (
ui,
{ initialState, ...renderOptions } = {}
'initialState' is already declared in the upper scope.Why is this an issue?
) => {
const history = createHistory();
const Wrapper = ({ children }) => (
<Provider store={store}><Router history={history}>{children}</Router></Provider>
);
return render(ui, { wrapper: Wrapper, ...renderOptions });
};
jest.mock("teplay-ui/Components/Collection/TvMenu", () => {
return {
TvMenu: () => {
return <div data-testid="tvMenu">Home</div>;
}
};
});
test("renders Menu component with initial state", () => {
const { getByText, getByTestId } = renderWithState(<Menu />, { initialState });
screen.debug();
expect(getByText(/Home/i).textContent).toBe("Home");
expect(getByTestId(/tvMenu/)).toBeInTheDocument();
});
test("renders Menu component with menu props", () => {
initialState.menu = menu
const { getByText, getByTestId } = renderWithState(<Menu />, { initialState });
screen.debug();
expect(getByText(/Home/i).textContent).toBe("Home");
expect(getByTestId(/tvMenu/)).toBeInTheDocument();
});
what could possibly be the reason ?
