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