Блог

У меня есть простой НабБар, который я хочу протестировать.

Если true , исходя из localStorage, будет отображаться кнопка.

src/components/UIElements/NavBar/NavBar.js

 const NavBar = () => {
 
  const isLoggedIn = localStorage.getItem('isLoggedIn');

  const handleLogout = () => {
    Auth.signOut().then(() => {
      localStorage.clear('isLoggedIn');
      history.push(routePath.LOGIN);
    });
  };

  return (
  
          {isLoggedIn amp;amp; (
            <Button onClick={handleLogout}>
              Logout
            </Button>
          )}
  );
 

В файле теста приведена часть моего теста:

Я не могу isLoggedIn = true использовать локальное хранилище для отображения кнопки, которую я хочу протестировать.

src/components/UIElements/NavBar/tests/NavBar.test.js

 
import { render, screen, fireEvent } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom';
import Amplify, { Auth } from 'aws-amplify';
import awsConfig from '../../../../aws-exports';
import configureStore from 'redux-mock-store';

import NavBar from '../NavBar';


Amplify.configure(awsConfig);

describe('render <NavBar/> component', () => {

    beforeEach(() => {
        render(
            <Router>
                <NavBar />
            </Router>
        );
    });

    // jest mock user is login
    Auth.signUp = jest.fn().mockImplementation(
        () => {
            return true;
        });

    it('User can sign out', async () => {
        // jest mock user sign out
        const mockSignOut = jest.fn().mockResolvedValue({});
        Auth.signOut = mockSignOut;

        // jest mock isLoggedIn true - wont work 
        jest.mock('../NavBar')
        const isLoggedIn = require('../NavBar')
        isLoggedIn.mockImplementation(() => {
            return true;
        })
        
        const buttonLogout = await screen.getByRole('button', { name: /logout/i });
        fireEvent.click(buttonLogout)
        expect(mockSignOut).toHaveBeenCalled()
    });
});
 

Вот несколько примеров того, как я пытался найти решение.

#1

         jest.doMock('../NavBar', () => ({
        localStorage$: of({ isLoggedIn: true }),
        }))
 

#2

         const isLoggedIn = jest.fn()
        isLoggedIn.mockReturnValue(true)
 

#3

     let mockIsLoggedIn = false
    jest.mock('../NavBar', () => {
        return jest.fn(() => ({
            isLoggedIn: mockIsLoggedIn
        }))
    })

mockIsLoggedIn = true
 

 ● render <NavBar/> component › User can sign out

    TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/logout/i`
 

Любые исправления в коде были бы чрезвычайно полезны, спасибо!