相关疑难解决方法(0)

我正在使用react-router V6并尝试测试useOutletContext的新功能。我的测试库是testing-library/react，我不确定如何在测试中传递上下文数据。

在 TSX 组件中，我使用 React-router 的钩子获取数据：

const { data } = useOutletContext<IContext>()

我需要类似的东西：

test("render outlet context data view", async () => {
  const { getByTestId } = render(
    <MockedProvider mocks={[mockData]} context={myContextData}>
       <ContextDataView />
    </MockedProvider>
)

MockedProvider 标签来自@apollo/client/testing

context={myContextData} 部分是我需要的

我有一个小型应用程序redux-dynamic-modules，用作存储，react-router用于路由，所有组件都是带有useState、useHistory、useLocation、useSelector等钩子的函数组件useDispatch。

我想设置react-testing-library来测试组件，正如文档中所述，我需要设置一个自定义render().

所以这是我的index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./redux/store";


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

这是我的 App.tsx

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { SearchPage } from "./pages/search/search-page";
import …

我已尽最大努力找出问题所在，但到目前为止我尝试的一切都不起作用。

这就是我的 App.js 的样子：

import './App.css';
import {ChakraProvider} from '@chakra-ui/react'
import Header from './components/Header'
import Hero from './components/Hero'
import Highlights from './components/Highlights.js'
import About from './components/About.js'
import Footer from './components/Footer.js'
import Reserve from './components/Reserve.js'
import '@fontsource/karla'
import '@fontsource/markazi-text'
import theme from './theme'
import { Routes, Route,} from "react-router-dom";

function Homepage(){
  return(
    <>
      <Hero/>
      <Highlights/>
      <About/>
      <Footer/>
    </>
  )
}
function App() {
  return (
    <ChakraProvider theme={theme}>
      <Header/>
      <main>
        <Routes>
          <Route path='/' element={<Homepage/>}/>
          <Route path='/Reservations' element={<Reserve/>}/>
        </Routes>
      </main>
    </ChakraProvider>
  );
} …

我已经针对找不到“window.matchMedia”的问题TypeError: j.window.MatchMedia is not a function实现了 Maxime 的解决方案，但是当我运行测试时，出现此错误： 。

我不确定我需要做什么才能解决“j”，因为如果我改变第一行

Object.defineProperties(window, "matchMedia" {

到

Object.defineProperties(j.window, "matchMedia" {

Jest 告诉我它无法解析“j”，这是有道理的，但不能帮助我理解和修复错误。