Question

我正在为React应用程序编写快照测试，我发现当我在其中使用<MemoryRouter/>编写测试时，它会发出警告，我需要有一个唯一的密钥道具。

当我查看react-router文档时，没有提到需要密钥，我在其他地方找不到解决这个特定问题的方法。

这是我的测试结果：

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忽略了陌生的道具。

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

有趣的控制台游戏……看起来mount多次击中了某些生命周期，因此该密钥在第1轮之后并不是唯一的，但不确定如何传递。

App.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>
    )
  }
}`

带有mount的App.test.js

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

来自app.js的

console.logs，带有MOUNT

`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`

带有SHALLOW的App.test.js

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

来自app.js的

console.logs，带有SHALLOW

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

  console.log src/App.js:20
    componentDidMount

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

没有错误。我不确定我的答案是否正确，因为当您应该使用浅表时，也许您正在使用mount？但是，必须有一些挂载的目的，以及消除错误的方法。

在测试中使用<memoryrouter>时，如何解决唯一键所需的错误

1 个答案: