尝试测试使用 Mobx 的 React 应用程序时出错

Question

我正在尝试在我的 React 应用程序上编写测试并从上下文中收到错误。 我收到的错误是：无法读取未定义的属性“Provider” 我的测试看起来像这样：

 import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event";
import EmailLoginForm from "../features/users/EmailLoginForm";



test('if no email and no password, button disabled', async () =>{

    render(<EmailLoginForm/>);  

    expect(await screen.findByRole('button', {  name: /login/i})).toBeDisabled();

      userEvent.type(screen.getByPlaceholderText(/email id/i),"[email protected]");
      userEvent.type(screen.getByPlaceholderText(/password/i),"testpw");

      expect(await screen.findByRole('button',{name :/login/i})).toBeEnabled();
})

我的主商店看起来像这样：

   import {createContext, useContext} from "react";
//..some imports that are not relevant


interface Store{
    // .. interface of which stores
}

export const store: Store = {
    //.. store declerations
    
}

export const StoreContext = createContext(store);

export function useStore(){
    return useContext(StoreContext);
}

我的 EmailLoginForm 是一个观察者。

index.tsx 看起来像这样：

  import React from 'react';
import ReactDOM from 'react-dom';
import '../src/app/layout/App';
import App from '../src/app/layout/App';
import reportWebVitals from './reportWebVitals';
import { createBrowserHistory } from 'history';
import { Router } from 'react-router-dom';
import './app/layout/index.css'
import { store, StoreContext } from "./app/stores/store"
import ScrollToTop from './app/layout/ScrollToTop';

export const history = createBrowserHistory();



ReactDOM.render(
  <StoreContext.Provider value={store}>
    <Router history={history}>
      <ScrollToTop />

          <App />

    </Router>
  </StoreContext.Provider>,
  document.getElementById('root')
);

我在这里很迷茫，不知道问题出在哪里以及如何解决它。 任何帮助将不胜感激。