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

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.

<MemoryRouter/>

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 />);
);


And here is the error I'm getting:

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


1 Answer
1

Any reason you're suing mount instead of shallow?

mount

shallow

I'm sort of a newbie... seriously asking...

I was running into this same problem with shallow and the solution I came up with...

shallow

(if using shallow is justifiable... )

shallow

try this:

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


I'm assuming MemoryWrapper ignores unfamiliar props.

I would like to know if this is a decent solution or if there's something else we're (I'm) missing.

interesting console play... it looks like mount hits some lifecycles more than once, so the key wouldn't be unique after round 1, but not sure how you would pass that.

mount

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

mount


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



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


console.logs from app.js with MOUNT

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

SHALLOW


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



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


console.logs from app.js with SHALLOW

SHALLOW

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

console.log src/App.js:20
componentDidMount

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


no error. I'm not sure if my answer is correct in that maybe you were using mount when you should have used shallow? But, there's got to be some purpose for mount, and some way to rid the error.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.