add App.test.tsx test with react testing library

- enhance jest.config.js
 1. add moduleDirectories: ['node_modules', 'src'], so jest can find modules in src folder
 instead of writing test like this: import greeter from './greeter'
 we can: import greeter from 'greeter';
 2. add setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts']
 to support extended handy expect
 check: testing-library/react-testing-library#379 (comment)
- add "esModuleInterop": true in tsconfig.json
  to fix: Cannot read property 'createElement' of undefined using TypeScript
   testing-library/react-testing-library#374 (comment)
   esModuleInterop vs allowSyntheticDefaultImports
   note: Enabling esModuleInterop will also enable allowSyntheticDefaultImports.
- add a new text example for react component: App.test.tsx

Author: bobbyquennell

jest.config.js

@@ -3,9 +3,11 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   roots: ['<rootDir>/src'],
+  moduleDirectories: ['node_modules', 'src'],
   transform: {
     '^.+\\.(ts|tsx)$': 'ts-jest',
   },
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   testMatch: [
     '<rootDir>/src/**/__tests__/**/*.[jt]s?(x)',
     '<rootDir>/src/**/?(*.)+(spec|test).[jt]s?(x)',

src/App.test.tsx

@@ -0,0 +1,9 @@
+import App from 'App';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+test('renders emotion button', () => {
+  render(<App userName="test">test</App>);
+  const emotionButton = screen.getByRole('button');
+  expect(emotionButton).toHaveTextContent('hello, I am from emotion');
+});

src/greeter.test.ts

@@ -1,4 +1,4 @@
-import greeter from './greeter';
+import greeter from 'greeter';
 
 it('should pass', () => {
   const result = greeter('Peggy');

src/setupTests.ts

@@ -0,0 +1,2 @@
+// https://github.com/testing-library/react-testing-library/issues/379#issuecomment-618089505
+import '@testing-library/jest-dom/extend-expect';

tsconfig.json

@@ -3,6 +3,7 @@
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "baseUrl": "src",
+    "esModuleInterop": true,
     "importsNotUsedAsValues": "preserve",
     "jsx": "react",
     "lib": ["ES2020", "DOM"],