小编mae*_*zzi的帖子

我有一个SongLink组件,如下所示:

import React from 'react'

const SongLink = props => (
  <ul className='search-results__ul'
      key={props.result.id} 
      onClick={props.handleClick} 
  >
    {props.result.name} by {props.result.artist}
  </ul>
)

export default SongLink

我正在尝试编写一个Jest测试来测试这个组件.我的第一次尝试看起来像这样:

import React from 'react'
import { shallow } from 'enzyme'
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-15'

import SongLink from '../components/SongLink'

configure({ adapter: new Adapter() })

test('it renders correctly', () => { 
  const component = shallow(<SongLink />)
  let tree = component.toJSON()
  expect(tree).toMatchSnapshot()
})

我得到了这个错误:TypeError: Cannot read property 'id' of undefined我理解这可能意味着我没有正确地将道具传递给我的测试. …

I'm writing snapshot tests for a React application, and I'm finding that when I write tests using <MemoryRouter/> in them, it throws a warning that I need to have a unique key prop.

When I looked at the react-router documentation, there was no mention of needing a key, and I haven't found a solution to this particular issue elsewhere.

This is what my test looks like:

import React from 'react';
import ReactDOM from 'react-dom';
import { mount, shallow } from …

即使我故意在构造函数中引发错误，我似乎也无法在代码中触发componentDidCatch，因此我知道我不会在事件处理程序中引发错误。我担心的是我没有成功将项目更新到React 16，这就是为什么componentDidCatch无法正常工作的原因。可能是我没有成功升级到React 16，还是我滥用了错误边界？

这是我已经查看并用来完成此操作的帖子：

1. React最佳实践中的错误处理

2. React 16 Error Boundary组件（使用componentDidCatch）显示未捕获的错误

3. 引入错误边界

App.js

import React, { Component } from 'react'
import axios from 'axios'

import ErrorBoundary from './components/ErrorBoundary'
import Home from './components/Home'
import Login from './components/Login'

class App extends Component {
  constructor (props) {
    super(props)

    this.state = {
      loggedIn: false,
      hasError: false
    }
    // This is where I am throwing my Error
    throw new Error('this should be caught')
  }

  componentWillMount () {
    axios.get(this.url, {
      withCredentials: true
    })
    .then((response) => {
      if (response.status …