Why do I get an error if the App is wrapped in Provider?-CodePudding

Why do I get an error if the App is wrapped in Provider? Is there anything else you need to add or change?

Error: "could not find react-redux context value; please ensure the component is wrapped in a @Provider@"

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './redux/redux-store';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

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

test('App renders', () => {
  render(<App />);
});

index.ts file

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './redux/redux-store';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

CodePudding user response：

You do wrap App in a Provider in your root render. But is not the case in the test.

test('App renders', () => {
  render(<Provider store={store}><App /></Provider>);
});