Estoy tratando de ejecutar la prueba de componentes en la aplicación React con broma y fallando con el siguiente error. Pero la aplicación funciona bien normalmente.

 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)

Aquí está mi archivo 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;

Aquí está el archivo de índice

 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();

y finalmente el archivo de prueba

 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(); });

He verificado muchos enlaces y probado de diferentes maneras, pero todos conducen a este error únicamente. Estoy usando un módulo npm privado y lo mapeé usando moduleNameMappers y, a veces, eso también arroja un error.

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

¿Alguien podría ayudarme si lo estoy haciendo bien o no? Necesito saber cómo mapear bibliotecas node_modules en código. Todos los módulos npm están funcionando excepto mi módulo privado.