Fix toHaveCompiledCss crash for SVG elements (#1827)

* Fix toHaveCompiledCss crash for SVG elements

* Update .changeset/plain-windows-listen.md

Co-authored-by: Kylor Hall <136543114+kylorhall-atlassian@users.noreply.github.com>

---------

Co-authored-by: Kylor Hall <136543114+kylorhall-atlassian@users.noreply.github.com>

Author: JForbesAtlassian

.changeset/plain-windows-listen.md

@@ -0,0 +1,6 @@
+---
+'@compiled/react': patch
+'@compiled/jest': patch
+---
+
+Fix `toHaveCompiledCss` in @compiled/jest crashing on SVG elements due to lack of className property and expands tests in `@compiled/react`.

packages/jest/src/matchers.ts

@@ -132,7 +132,7 @@ export function toHaveCompiledCss(
   const stylesToFind = mapProperties(properties);
   const foundStyles: string[] = [];
   const similarStyles: string[] = [];
-  const classNames = element.className.split(' ');
+  const classNames = element.classList;
 
   for (const styleElement of styleElements) {
     let css = styleElement.textContent || '';

packages/react/src/__tests__/jest-matcher.test.tsx

@@ -18,6 +18,19 @@ describe('toHaveCompliedCss', () => {
     expect(getByText('hello world')).toHaveCompiledCss('font-size', '12px');
   });
 
+  it('should detect styles (SVG)', () => {
+    const { getByText } = render(
+      <svg
+        css={{
+          fontSize: '12px',
+        }}>
+        hello world
+      </svg>
+    );
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '12px');
+  });
+
   it('should detect missing styles', () => {
     const { getByText } = render(<div css={{ fontSize: '12px' }}>hello world</div>);