Question

在测试 react 组件时，我不断收到此错误：Invariant failed: You should not use outside a .我添加了这个 - import {Route, Switch} from "react-router-dom";但它没有帮助。

待测试组件（英雄部分）：

import React from 'react';
import './HeroSection.css';
import Searchbox from './search/Searchbox'

function HeroSection() {
  return (
    <div className='hero-container'>
      <img src='/images/Home/hero.jpg'/>
      <h1>Title 1</h1>
        <Searchbox />
    </div>
  );
}

export default HeroSection;

HeroSection.test.js :


import * as React from "react";
import * as ReactDOM from "react-dom"

import HeroSection from './HeroSection'

test('testing', () => {
    const root = document.createElement("div");
    ReactDOM.render(<HeroSection />, root);
    expect(root.querySelector("h1").textContent).toBe("Title 1");
})

任何解决问题的建议都会非常有帮助！

Answer 1

出现这个问题是因为从 'react-router 导入的组件应该用 Router provider 包装。您可以参考此了解详情https://testing-library.com/docs/example-react-router/

错误：不变失败：你不应该在 <Router> 之外使用 <Link> 来反应

1 个答案: