如何使用Jest测试React Router中的动态路由？

首先，咱们先揪出你代码里最显眼的问题——App组件的定义语法写错了：
你当前写的是：

class App extends {Component} {
  // ...
}

这里的extends {Component}是错误写法，多了一对多余的大括号，正确的写法应该是：

class App extends Component {
  render() {
    return (
      <div>
        <Nav />
        <Switch>
          <Route path='/block/:id/' component={Block} />
        </Switch>
      </div>
    )
  }
}

这个语法错误会直接导致组件类型无效，触发你看到的报错。

除此之外，还有几个常见的排查方向，你可以逐一核对：

• 组件导入是否完整且正确：
  确保Nav、Block组件，以及MemoryRouter、Switch、Route这些路由相关组件都从正确的包和路径导入了：

  // 导入React核心和Component
  import React, { Component } from 'react';
  // 导入路由组件
  import { MemoryRouter, Switch, Route } from 'react-router-dom';
  // 确保Nav和Block的导入路径和文件名匹配
  import Nav from './Nav';
  import Block from './Block';
  

  如果导入路径错误，或者漏导入了某个组件，也会触发这个“元素类型无效”的错误。

• 确认Route的component属性是有效组件：
  检查Block是否是一个合法的React组件（类组件或者函数组件），而不是undefined、null或者其他非组件类型的值。

修复完语法错误，再核对完导入问题后，你可以重新运行测试。这里给你整理了修正后的完整代码示例：

// 必要的导入语句
import React, { Component } from 'react';
import { MemoryRouter, Switch, Route } from 'react-router-dom';
import { mount } from 'enzyme';
import Nav from './Nav';
import Block from './Block';

// 修正后的App组件
class App extends Component {
  render() {
    return (
      <div>
        <Nav />
        <Switch>
          <Route path='/block/:id/' component={Block} />
        </Switch>
      </div>
    )
  }
}

// 测试代码
test('block route has commons', () => {
  const wrapper = mount(
    <MemoryRouter initialEntries={['/block/123']} >
      <App />
    </MemoryRouter>
  )
  expect(wrapper.find('Nav')).toHaveLength(1)
})

这样应该就能解决你遇到的错误了。

内容的提问来源于stack exchange，提问作者cooldude101