Setup test utils

jest.config.js

@@ -2,6 +2,9 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jest-environment-jsdom',
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    '^@test-utils': '<rootDir>/test-utils',
+  },
   transform: {
     '^.+\\.ts?$': 'ts-jest',
   },

src/Welcome/Welcome.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from '@test-utils';
 import { Welcome } from './Welcome';
 
 it('displays welcome text', () => {

test-utils/index.ts

@@ -0,0 +1 @@
+export { render } from './render';

test-utils/render.tsx

@@ -0,0 +1,11 @@
+import { render as testingLibraryRender } from '@testing-library/react';
+import { ThemeProvider } from '../src/ThemeProvider';
+
+export function render(children: React.ReactNode) {
+  const { rerender, ...others } = testingLibraryRender(<ThemeProvider>{children}</ThemeProvider>);
+  return {
+    rerender: (ui: React.ReactElement<any, string | React.JSXElementConstructor<any>>) =>
+      rerender(<ThemeProvider>{ui}</ThemeProvider>),
+    ...others,
+  };
+}

tsconfig.json

@@ -14,8 +14,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@test-utils": ["./test-utils"]
+    }
   },
-  "include": ["src"],
+  "include": ["src", "test-utils"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }