(feat): Add react-testing-library to react templates

src/templates/react.ts

@@ -7,6 +7,8 @@ const reactTemplate: Template = {
   name: 'react',
   dependencies: [
     ...basicTemplate.dependencies,
+    '@testing-library/react',
+    '@testing-library/jest-dom',
     '@types/react',
     '@types/react-dom',
     'react',
@@ -21,6 +23,9 @@ const reactTemplate: Template = {
       ...basicTemplate.packageJson.scripts,
       test: 'tsdx test --passWithNoTests',
     } as PackageJson['scripts'],
+    jest: {
+      setupFilesAfterEnv: ['./jest.setup.ts'],
+    },
   },
 };
 

templates/react-with-storybook/README.md

@@ -87,7 +87,7 @@ tsconfig.json
 
 #### React Testing Library
 
-We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
+[React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) has been set up for you to help with best practices for writing React tests.
 
 ### Rollup
 

templates/react-with-storybook/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

templates/react-with-storybook/test/index.test.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import * as ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { Default as Thing } from '../stories/Thing.stories';
 
 describe('Thing', () => {
-  it('renders without crashing', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Thing />, div);
-    ReactDOM.unmountComponentAtNode(div);
+  it('renders the correct text', () => {
+    const { getByText } = render(<Thing />);
+
+    expect(
+      getByText('the snozzberries taste like snozzberries')
+    ).toBeInTheDocument();
   });
 });

templates/react/README.md

@@ -66,7 +66,7 @@ tsconfig.json
 
 #### React Testing Library
 
-We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
+[React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) has been set up for you to help with best practices for writing React tests.
 
 ### Rollup
 

templates/react/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

templates/react/test/index.test.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { Thing } from '../src';
 
 describe('Thing', () => {
-  it('renders without crashing', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Thing />, div);
-    ReactDOM.unmountComponentAtNode(div);
+  it('renders the correct text', () => {
+    const { getByText } = render(<Thing />);
+
+    expect(
+      getByText('the snozzberries taste like snozzberries')
+    ).toBeInTheDocument();
   });
 });