javascript - 如何解决在测试中使用 时需要唯一键的错误

Question

我正在为 React 应用程序编写快照测试，并且我发现当我使用 <MemoryRouter/> 编写测试时会出现这种情况。在它们中，它发出警告，我需要有一个独特的关键 Prop 。

当我查看react-router文档时，没有提到需要 key ，而且我还没有在其他地方找到这个特定问题的解决方案。

这就是我的测试:

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多次命中某些生命周期，因此在第一轮之后 key 将不再是唯一的，但不确定如何传递它。

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

App.test.js w/mount


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`

App.test.js w/SHALLOW


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`

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