How can I use this to do testing in React?

[isabellachen]

The tests in my project use JSDOM, which makes testing the rendering of svg elements impossible. Can I use SVGDOM to help with testing React components with svg in them? How can I do this? In this code, the Map component uses react-simple-maps to render an svg map.

  it('should render an empty map', () => {
    const { container } = renderWithStores(
      Map,
      {
        dataCenterLocationsItems: [],
      },
      {},
    );
    const map = container.querySelector('.rsm-svg') as SVGElement;
    const circles = container.querySelectorAll('circle');
    expect(circles.length).toBe(0);
    expect(map).toBeDefined();
  });

renderWithStores which use react-testing-library.

import React from 'react';
import { Provider } from 'mobx-react';
import { render } from 'react-testing-library';
import { HashRouter } from 'react-router-dom';

export function renderWithStores(Component, props, stores) {
  return render(
    <HashRouter>
      <Provider {...stores}>
        <Component {...props} />
      </Provider>
    </HashRouter>,
  );
}

[Fuzzyma]

I dont know how tests in react are done. svgdom just gives you a normal dom like in the browser windo. As far as I know react uses a virtual dom. So I have no idea how to use them together

[isabellachen]

Oh ok. Maybe its not possible, I'll have to use Cypress. Thanks for replying :)