Jest 失败，因为目标容器不是 DOM 元素

Question

我正在尝试运行开玩笑地在 React 应用程序上进行组件测试，但由于以下错误而失败。但是应用程序运行正常

 FAIL  src/__tests__/app.test.tsx
  ● Test suite failed to run

    Target container is not a DOM element.

       7 | import reportWebVitals from './reportWebVitals';
       8 |
    >  9 | ReactDOM.render(
         |          ^
      10 |     <React.StrictMode>
      11 |         <Provider store={store}>
      12 |             <App />

      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26091:13)
      at Object.<anonymous> (src/index.tsx:9:10)
      at Object.<anonymous> (src/App.tsx:6:1)
      at Object.<anonymous> (src/__tests__/app.test.tsx:45:1)

这是我的 App.tsx 文件。

import React from 'react';
import 'reflect-metadata';
import { BrowserRouter, Switch } from 'react-router-dom';
import { Message } from '@library/queues';

const App: React.FC = () => {
   return (
     <ThemeProvider theme={'dark'}>
      // routes
     </ThemeProvider>
   )}

export default App;

这是索引文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from 'App';
import { Provider } from 'react-redux';
import store from 'redux/store';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root'),
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

最后是测试文件

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
    render(<App />);
    const linkElement = screen.getByText(/learn react/i);
    expect(linkElement).toBeInTheDocument();
});

我已经验证了很多链接并尝试了不同的方法，但都只会导致这个错误。我正在使用一个私有 npm 模块并使用 moduleNameMappers 映射它，有时也会抛出错误。

moduleNameMapper: {
        '^@library/queues(.*)$': '<rootDir>/src/', -- working without errors but throwing errors when we run tests
        // '^@library/queues(.*)$': '<rootDir>/node_modules/', -- throwing errors
        '\.(css|scss|jpg|png)$': '<rootDir>/empty-mock-module.js',
    },

有人能帮我看看我做的对不对。我需要知道如何在代码中映射 node_modules 库。除我的私有模块外，所有 npm 模块都在工作。

Answer 1

当应用程序在 Jest 中呈现时，它找不到 'root' 元素，因此我找到的一种解决方案是在 'root' 不存在时提供 div 元素。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root') || document.createElement('div')
);

Jest 失败，因为目标容器不是 DOM 元素

Jest fails because Target container is not a DOM element

javascript

typescript

reactjs

jestjs