如何测试使用mobx状态的组件

when calling the test it gives an error



Test suite failed to run

    createRoot(...): Target container is not a DOM element.

       5 | import {App} from "./App";
       6 |
    >  7 | const root = ReactDOM.createRoot(
         |                       ^
       8 |   document.getElementById('root') as HTMLElement
       9 | );
      10 | interface IUser {

the test itself

import React from 'react';
import {render, screen} from '@testing-library/react';
import StartPage from "../router/pages/StartPage";


describe('StartPage', () => {
    test('renders learn react link', () => {

        render(<StartPage />);
        const linkElement = screen.getByText(/start page/i);
        expect(linkElement).toBeInTheDocument();
    });
})

component and hook

import React, {useContext} from 'react';
import {observer} from "mobx-react-lite";
import {useCheckAuth} from "../../hooks/useCheckAuth";
import {Context} from "../../index";

const StartPage = observer(() => {

    const { user } = useContext(Context)
    const checkAuth = useCheckAuth();

    return (
        <div>
           start page
        </div>
    );
});

export default StartPage;

import {useContext, useEffect, useState} from "react";
import {Context} from "../index";

export const useCheckAuth = async () => {
    const { user } = useContext(Context);
    const [isAuthChecked, setIsAuthChecked] = useState(false);

    useEffect(() => {
        const token = localStorage.getItem("token");
        if (token && !isAuthChecked) {
            user.checkAuth(token);
            user.getUserProfile();
            setIsAuthChecked(true);
        }
    }, [user]);

    return isAuthChecked;
};

and index.ts

import React, {createContext} from 'react';
import ReactDOM from 'react-dom/client';
import "./index.module.css"
import UserStore from "./store/userStore/UserStore";
import {App} from "./App";

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
interface IUser {
    user: UserStore
}
export const user = new UserStore();
export const Context = createContext<IUser>({
    user
})

root.render(

  <React.StrictMode>
      <Context.Provider value={{
          user
      }}>
          <App/>
      </Context.Provider>
  </React.StrictMode>
);

![°“±”](数据:image/png;base64,iVBORw0KGgoAAAANSUheugAAABQAAAAUCQAAAAangNWGAAAA/0lEQVR4AYXNMSiEcRyA4cfmGHQbZIipkuxnJgMStlMNmeyD2dwmc8+sZgxYJd9ErIZFHUyYYD7fkr6l4/rnvmtl7+KitrqV/fq2Y5ELY3Z9S48eRLe7BmVZ9qhTLhQ0alzZWQOVKScF8OjAnwbxDTWFDUhPK/jMr1H6HE/IqRky2DyvCefuwItwZzodVoYRiLqMkVCXrwpJ9twZ+sgfDYEFYl8wIWxZ9uFf7zkalxlJh4YrLGsKjZRx7VGHhLqwgFUN45DGdb8MeXGpgB4ABZdeDcpZEY51A+hyLKz4S1W4MQWm3AibWtgWmk6dyySa1pSdyWTOlLXVp0+eL9D/ZPfBTAnAAAAAElFTkSuQmCC)

when I deleted:
const { user } = useContext(Context)
const checkAuth = useCheckAuth();

the test started to pass.

I tried using context
describe('StartPage', () => {
    test('renders learn react link', () => {

        render(
            <Context.Provider value={{user}}>
                <StartPage />
            </Context.Provider>
            );
        const linkElement = screen.getByText(/start page/i);
        expect(linkElement).toBeInTheDocument();
    });
})

and


import {Provider} from "mobx-react";


describe('StartPage', () => {
    test('renders learn react link', () => {

        render(
            <Provider value={user}>
                <StartPage />
            </Provider>
            );
        const linkElement = screen.getByText(/start page/i);
        expect(linkElement).toBeInTheDocument();
    });
})

But this resulted in the same error

0 回复 | 直到 2 年前