How to resolve unique keys required error when using <MemoryRouter /> in a test

Question

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 'enzyme';
import renderer from 'react-test-renderer';
import { MemoryRouter } from 'react-router'
import Navbar from '../Navbar';

it('renders a snapshot', () => {
  const wrapper = mount(
    <MemoryRouter  
      initialEntries={['/' ]}
      initialIndex={1}
    >
      <Navbar/>
    </MemoryRouter>
  )
  const tree = renderer.create(wrapper).toJSON();
  expect(tree).toMatchSnapshot();
});

it('renders without crashing', () => {
  shallow(<Navbar />);
});

这是我得到的错误：

Warning: Each child in an array or iterator should have a unique "key" prop.

Answer 1

您有什么理由起诉mount而不是起诉shallow？

我是个新手。。认真的问一下。。

我遇到了同样的问题，shallow我想出了解决方案......

（如果使用shallow是合理的......）

尝试这个：

 `
    <div key={1}> // this is the dude here
        <MemoryRouter>
             <App />
        </MemoryRouter>
    </div>`

我假设 MemoryWrapper 会忽略不熟悉的 props。

我想知道这是否是一个不错的解决方案，或者我们（我）是否还缺少其他东西。

有趣的控制台游戏...它看起来mount不止一次地命中了某些生命周期，因此在第一轮之后密钥将不再是唯一的，但不确定您将如何通过它。

应用程序.js

`class App extends Component {
  componentWillMount() {
    console.log('componentWillMount');
}
 componentDidMount() {
    console.log('componentDidMount');
}
 componentWillReceiveProps() {
    console.log('componentWillReceiveProps');
}
 shouldComponentUpdate() {
    console.log('shouldComponentUpdate');
    return true;
}
 componentWillUpdate() {
    console.log('componentWillUpdate');
}
 componentDidUpdate() {
    console.log('componentDidUpdate');
}
 componentWillUnmount() {
    console.log('componentWillUnmount');
}
  render() {
    return (
      <div className='App-main'>
        <Route path='/' component={Header}/>
        <Route path='/' component={About} />
      </div>
    )
  }
}`

App.test.js w/mount

it('renders App without crashing', () => { const appWrapper = mount( <div key={1}> <MemoryRouter> <App /> </MemoryRouter> </div> );

来自 app.js 的 console.logsMOUNT

`console.log src/App.js:17
    componentWillMount

  console.log src/App.js:20
    componentDidMount

  console.error node_modules/fbjs/lib/warning.js:33
    Warning: Each child in an array or iterator should have a unique "key" prop. See https://some-dumb-shit.org for more information.

  console.log src/App.js:17
    componentWillMount

  console.log src/App.js:20
    componentDidMount

  console.log src/App.js:36
    componentWillUnmount`

App.test.js w/SHALLOW

it('renders App without crashing', () => { const appWrapper = shallow( <div key={1}> <MemoryRouter> <App /> </MemoryRouter> </div> );

来自 app.js 的 console.logsSHALLOW

`console.log src/App.js:17
    componentWillMount

  console.log src/App.js:20
    componentDidMount

  console.log src/App.js:36
    componentWillUnmount`

没有错误。我不确定我的答案是否正确，因为也许您在应该使用浅层时使用了安装？但是，挂载必须有某种目的，并且有某种方法可以消除错误。