Update tests

src/components/Overlay.tsx

@@ -215,6 +215,7 @@ export default class JoyrideOverlay extends React.Component<OverlayProps, State>
     return (
       <div
         className="react-joyride__overlay"
+        data-test-id="overlay"
         onClick={onClickOverlay}
         role="presentation"
         style={stylesOverlay}

src/components/Spotlight.tsx

@@ -5,7 +5,14 @@ interface Props {
 }
 
 function JoyrideSpotlight({ styles }: Props) {
-  return <div key="JoyrideSpotlight" className="react-joyride__spotlight" style={styles} />;
+  return (
+    <div
+      key="JoyrideSpotlight"
+      className="react-joyride__spotlight"
+      data-test-id="spotlight"
+      style={styles}
+    />
+  );
 }
 
 export default JoyrideSpotlight;

test/tours/__snapshots__/ssr.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Joyride > SSR should render without errors 1`] = `"<div data-test-id="demo"><main><div class="hero"><div class="container"><div class="hero__content"><h1><span>Create walkthroughs and guided tours for your ReactJS apps.</span></h1><button data-test-id="start" type="button">Let&#x27;s Go!</button></div></div></div><div class="demo__section projects"><div class="container"><h2><span>Projects</span></h2><div class="list"><div>Installation</div><div>Documentation</div><div>Support </div></div></div></div><div class="demo__section mission"><div class="container"><h2><span>Mission</span></h2><button data-test-id="mission-button" type="button">Click me</button></div></div><div class="demo__section about"><div class="container"><h2><span>About</span></h2></div></div></main><footer class="demo__footer"><div class="container"><button type="button">Joyride</button></div></footer></div>"`;

test/tours/no-dom.spec.tsx

@@ -1,16 +1,27 @@
-/**
- * @jest-environment node
- */
-
 import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 
 import Standard from '../__fixtures__/Standard';
+import { fireEvent, render, screen } from '../__fixtures__/test-utils';
+
+const mockCallback = jest.fn();
+
+jest.mock('~/modules/dom', () => {
+  const originalModule = jest.requireActual('~/modules/dom');
+
+  return {
+    ...originalModule,
+    canUseDOM: jest.fn().mockImplementation(() => false),
+  };
+});
 
 describe('Joyride > NO-DOM', () => {
-  it('should render without errors', async () => {
-    const view = renderToStaticMarkup(<Standard />);
+  render(<Standard callback={mockCallback} />);
+
+  it('should not render the step when starting the tour', async () => {
+    fireEvent.click(screen.getByTestId('start'));
+
+    expect(screen.queryById('react-joyride-step-0')).not.toBeInTheDocument();
 
-    expect(view).toMatchSnapshot();
+    expect(mockCallback).not.toHaveBeenCalled();
   });
 });

test/tours/ssr.spec.tsx

@@ -0,0 +1,16 @@
+/**
+ * @jest-environment node
+ */
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import Standard from '../__fixtures__/Standard';
+
+describe('Joyride > SSR', () => {
+  it('should render without errors', async () => {
+    const view = renderToStaticMarkup(<Standard />);
+
+    expect(view).toMatchSnapshot();
+  });
+});