Как я могу протестировать компонент, который использует наблюдатель mobx-response-lite с useContext?

Question

Я пытаюсь изменить контекст с неаутентифицированного на аутентифицированный, чтобы я мог проверить, как мой компонент ведет себя в двух состояниях.Я попытался проверить это с Context.Оболочка провайдера, но она не работала, потому что наблюдатель не зависит от Context.Provider, а сам компонент не может изменить состояние на аутентифицированное.Я также нашел решение здесь (пример песочницы кода) , но все, что он делает, - это создает новый компонент в самом тестовом файле без фактического тестирования реального.

• Элемент списка

6 кв.м. из встраивания

import { observer } from 'mobx-react-lite';
import RootStoreContext from '../../stores/RootStore/RootStore';
const Navbar: FunctionComponent = observer(
  (): JSX.Element => {
    const { authStore } = useContext(RootStoreContext);
    return (
      <nav className="navbar ">
        {authStore.authState.isAuth ? (
          <button
            onClick={() => authStore.resetAuthState()}
            data-testid="logout"
          >
            Logout
          </button>
        ) : (
          <>
            <NavLink to="/sign-up" data-testid="login">
              <strong>Sign up</strong>
            </NavLink>
            <NavLink to="/login" data-testid="signup">
              <strong>Login</strong>
            </NavLink>
          </>
        )}
      </nav>
    );
  },
);

export default Navbar;

import Navbar from './Navbar';
import { RootStore } from '../../stores/RootStore/RootStore';
describe('<Navbar />', (): void => {
  const { container, rerender, queryByTestId, getByText } = render(<Navbar />, {
    wrapper: ({ children }) => <BrowserRouter>{children}</BrowserRouter>,
  });

  it('snapshot', (): void => {
    expect(container).toMatchSnapshot();
  });
//Im trying to interact with authState so i can make this test work.
  it('should have Login and SignUp links if isAuth is false', async (): Promise<
    void
  > => {
    const LoginLink = queryByTestId('login');
    const SignUpLink = queryByTestId('signup');
    const LogoutLink = queryByTestId('logout');
    expect(LoginLink).toBeTruthy();
    expect(SignUpLink).toBeTruthy();
    expect(LogoutLink).toBeNull();
  });
  const LoginLink = queryByTestId('login');
    const SignUpLink = queryByTestId('signup');
    const LogoutLink = queryByTestId('logout');
    expect(LoginLink).toBeNull();
    expect(SignUpLink).toBeNull();
    expect(LogoutLink).toBeTruthy();
});