title: React-Leaflet: 'Invalid LatLng object' on running test when using boundsOptions
body: <p>I built an simple app using react-leaflet to show a map. The app itself is working and the map is showing correctly in the browser. But when I try to write tests with react-testing-library, I receive <code>Invalid LatLng object</code>' in execution when using <code>boundsOptions</code>. If I remove the boundsOptions property the test will pass.</p>
  
  <p>Map.tsx</p>
  
  <pre class="lang-js prettyprint-override"><code>import "leaflet/dist/leaflet.css";
  import React from "react";
  import {
    LayersControl,
    Marker,
    Polyline,
    TileLayer,
    Tooltip,
    Map
  } from "react-leaflet";
  import './Map.css';
  
  const { BaseLayer } = LayersControl;
  
  const MapWrapper: React.FC = ({ ...props }) =&gt; {
    const layers = [
      {
        name: "OpenStreetMap.Mapnik",
        attribution:
          '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors',
        url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      }
    ];
  
    const bounds: [number, number][] = [];
  
    [...] // Code that calculates the bounds to show (in production)
  
    if (bounds.length === 0) {
      bounds.push([35, -35]);
      bounds.push([65, 55]);
    }
  
    return (
        &lt;Map bounds={bounds} boundsOptions={{ padding: [5, 5] }} className="map"&gt;
          &lt;LayersControl position="topright"&gt;
            {layers.map(layer =&gt; {
              return (
                &lt;BaseLayer
                  key={layer.url}
                  checked={true}
                  name={layer.name}
                &gt;
                  &lt;TileLayer attribution={layer.attribution} url={layer.url} /&gt;
                &lt;/BaseLayer&gt;
              );
            })}
          &lt;/LayersControl&gt;
        &lt;/Map&gt;
    );
  };
  </code></pre>
  
  <p>Map.css</p>
  
  <pre class="lang-css prettyprint-override"><code>.map {
    height: 400px;
    width: 640px;
  }
  </code></pre>
  
  <p>Map.test.tsx</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import MapWrapper from './Map';
  import {render, fireEvent, cleanup} from '@testing-library/react';
  
  afterEach(cleanup)
  
  test('Simple test', () =&gt; {
    const { getByTestId } = render(&lt;MapWrapper /&gt;)
  })
  </code></pre>
  
  <p>Error occurred by test</p>
  
  <pre><code>    console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
        Error: Uncaught [Error: Invalid LatLng object: (NaN, NaN)]
            at reportException (C:\Repos\react-leaflet-jest\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
      ...
      console.error node_modules/react-dom/cjs/react-dom.development.js:19814
        The above error occurred in the &lt;TileLayer&gt; component:
            in TileLayer (created by Context.Consumer)
  </code></pre>
  
  <p>You can find the code here: <a href="https://bitbucket.org/netcoding/react-leaflet-jest/src/master/" rel="nofollow noreferrer">https://bitbucket.org/netcoding/react-leaflet-jest/src/master/</a></p>
  
  <p>How can I setup react-leaflet to pass the test using the boundsOptions?</p>