Javascript 无法使用ReactDOM呈现React函数

我正在尝试为呈现函数

Game（）

编写测试，该函数用于Connect 4 react页面

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

import * as useGame from "./hooks/use-game";
import Game from ".";

const STATE_SPY = jest.spyOn(useGame, "default");
STATE_SPY.mockReturnValue({
  winner: "",
  dimensions: {
    numRows: 4,
    numCols: 4,
  },
  squares: [
    ["", "", "", ""],
    ["", "", "", ""],
    ["", "", "", ""],
    ["", "", "", ""],
  ],
});
const { container } = render(<Game />, document.getElementById("game"));

---

这个输入正确吗<代码>从导入游戏“我认为正确的方法是：

从导入游戏“/”

我使用了从ReactDOM中使用

渲染
，而不是从ReactDOM中使用
渲染
1@testing-库/反应“”。这使我能够进行我想要的测试。
您是否尝试创建自己的渲染函数？类似于这样的功能，根据您的需要调整该函数，并在测试中使用它：

import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import ConnectedRouter from 'react-router-redux/ConnectedRouter';
import { Provider } from 'react-redux';
import ReduxConnectedIntlProvider from '../ReduxConnectedIntlProvider';
import ThemeContext from '../context/theme-context';
import { store } from '../store';
import theme from '../theme/theme';
import { createMemoryHistory } from 'history';

const render = (
  ui,
  {
    route = '/',
    history = createMemoryHistory({ initialEntries: [route] }),
    ...renderOptions
  } = {}
) => {
  const Wrapper = ({ children }) => {
    return (
      <Provider store={store}>
        <ReduxConnectedIntlProvider>
          <ThemeContext.Provider value={theme}>
            <ConnectedRouter history={history}>{children}</ConnectedRouter>
          </ThemeContext.Provider>
        </ReduxConnectedIntlProvider>
      </Provider>
    );
  };
  return { ...rtlRender(ui, { wrapper: Wrapper, ...renderOptions }), history };
};

// re-export everything
export * from '@testing-library/react';

// override render method
export { render };

问候。
没错。我还有一个
index.tsx
和game.tsx在同一个文件夹中，带有
export{default}from.“/game”为了安全起见，我尝试了您的导入方法并收到了相同的结果。
import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import ConnectedRouter from 'react-router-redux/ConnectedRouter';
import { Provider } from 'react-redux';
import ReduxConnectedIntlProvider from '../ReduxConnectedIntlProvider';
import ThemeContext from '../context/theme-context';
import { store } from '../store';
import theme from '../theme/theme';
import { createMemoryHistory } from 'history';

const render = (
  ui,
  {
    route = '/',
    history = createMemoryHistory({ initialEntries: [route] }),
    ...renderOptions
  } = {}
) => {
  const Wrapper = ({ children }) => {
    return (
      <Provider store={store}>
        <ReduxConnectedIntlProvider>
          <ThemeContext.Provider value={theme}>
            <ConnectedRouter history={history}>{children}</ConnectedRouter>
          </ThemeContext.Provider>
        </ReduxConnectedIntlProvider>
      </Provider>
    );
  };
  return { ...rtlRender(ui, { wrapper: Wrapper, ...renderOptions }), history };
};

// re-export everything
export * from '@testing-library/react';

// override render method
export { render };

import { connect } from 'react-redux';
import { IntlProvider } from 'react-intl';

function mapStateToProps(state) {
  const { language, messages } = state.intl;
  return { locale: language, key: language, messages };
}

export default connect(mapStateToProps)(IntlProvider);