如果应用程序被包装在提供者中，为什么我会得到一个错误？

Question

如果应用程序被包装在提供者中，为什么我会得到一个错误？您还需要添加或更改其他内容吗？

错误：“未能找到react redux上下文值；请确保组件包装在@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文件

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

Answer 1

您可以在根呈现中将App包装在提供程序中。但在测试中情况并非如此。

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