chore: change react template test to one snapshot test (#387)

* chore: change react template test to one snapshot test

* chore: add test steps

* chore: format

docs/developing.md

@@ -167,10 +167,21 @@ might want to run:
 
 2. From the root of the project, run the following to add your component to the
    yarn workspace.
+
    ```bash
    yarn && yarn build
    ```
 
+3. The generated template comes with a simple snapshot test case (ie.
+   `packages/react/src/components/TestComponent/__tests__/TestComponent.test.js`),
+   feel free to add additional test cases here. In order to generate the
+   snapshot run:
+
+   ```bash
+   cd package/react
+   yarn test
+   ```
+
 ## Building a Web Component
 
 1. From the `web-components` package folder, run the `generate` script and
@@ -197,10 +208,21 @@ might want to run:
 
 2. From the root of the project, run the following to add your component to the
    yarn workspace.
+
    ```bash
    yarn && yarn build
    ```
 
+3. The generated template comes with a simple snapshot test case (ie.
+   `packages/web-components/src/components/test-component/__tests__/test-component.test.js`),
+   feel free to add additional test cases here. In order to generate the
+   snapshot run:
+
+   ```bash
+   cd package/web-components
+   yarn test
+   ```
+
 ## Document maintainers
 
 Each asset in Labs must have dedicated contributors and organize its own code

packages/react/tasks/generate/templates/__tests__/DISPLAY_NAME.test.js

@@ -7,57 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render } from '@testing-library/react';
 import React from 'react';
 import '@testing-library/jest-dom';
 
 import { DISPLAY_NAME } from '../components/DISPLAY_NAME';
-jest.mock('./button.scss', () => ({}));
+jest.mock('./STYLE_NAME.scss', () => ({}));
 describe('DISPLAY_NAME', () => {
   describe('renders as expected - Component API', () => {
     it('should match snapshot', () => {
       const { container } = render(<DISPLAY_NAME />);
       expect(container).toMatchSnapshot();
     });
-
-    it('renders a button element', () => {
-      render(<DISPLAY_NAME />);
-      expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('renders with default text "Button"', () => {
-      render(<DISPLAY_NAME />);
-      expect(screen.getByRole('button')).toHaveTextContent(/^Button$/);
-    });
-
-    it('supports a custom class name', () => {
-      const { container } = render(<DISPLAY_NAME className="test" />);
-      expect(container.firstChild.firstChild).toHaveClass('test');
-    });
-
-    it('supports additional props', () => {
-      render(<DISPLAY_NAME data-testid="test-button" />);
-      expect(screen.getByRole('button')).toHaveAttribute(
-        'data-testid',
-        'test-button'
-      );
-    });
-
-    it('supports disabled state', () => {
-      render(<DISPLAY_NAME disabled />);
-      expect(screen.getByRole('button')).toBeDisabled();
-    });
-  });
-
-  describe('behaves as expected', () => {
-    it('calls onClick handler when clicked', async () => {
-      const onClick = jest.fn();
-      render(<DISPLAY_NAME onClick={onClick} />);
-
-      expect(onClick).toHaveBeenCalledTimes(0);
-      await userEvent.click(screen.getByRole('button'));
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
   });
 });

packages/react/tasks/generate/templates/example/package-edit.json

@@ -1,5 +1,5 @@
 {
-  "name": "carbon-labs-react-STYLE_NAME",
+  "name": "carbon-labs-react-STYLE_NAME-example",
   "private": true,
   "version": "0.0.0",
   "type": "module",