in the middle of testing babel config

Author: DavidChen-minted

__tests__/pages/index.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+// import { NextComponentType } from 'next';
+import { mount, ReactWrapper } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+// import App from '../../pages/_app';
+import Index from '../../pages/index';
+
+// const AppWrapper = (props = {}) => mount(<App {...props} />);
+
+describe('Pages', () => {
+  describe('Index', () => {
+    let TestIndexWrapper: ReactWrapper;
+    it('should render without throwing an error', () => {
+      act(() => {
+        // @ts-ignore
+        TestIndexWrapper = mount(<Index userAgent="test" />);
+      });
+      expect(TestIndexWrapper.find('main').text()).toBe('Your user agent: test');
+    });
+  });
+});

babel.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  presets: [
+    [
+      'next/babel',
+      {
+        'styled-jsx': {},
+        'preset-env': {},
+        'preset-react': {},
+      },
+    ],
+  ],
+  env: {
+    test: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+            targets: { node: 'current' },
+          },
+        ],
+        '@babel/react',
+        '@babel/typescript',
+      ],
+    },
+  },
+};

enzyme.js

@@ -0,0 +1,9 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+// Make sure you can use "publicRuntimeConfig" within tests.
+
+// import { setConfig } from 'next/config';
+// import config from './next.config';
+
+// setConfig(config);
+Enzyme.configure({ adapter: new Adapter() });

jest.config.js

@@ -0,0 +1,28 @@
+// const esModules = ['next', 'enzyme'].join('|');
+
+module.exports = {
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|js?|tsx?|ts?)$',
+  globals: {
+    NODE_ENV: 'test',
+  },
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  transform: {
+    '^.+\\.(j|t)sx?$': 'babel-jest',
+  },
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    'enzyme.js',
+    '<rootDir>/configs/',
+    'jest.config.js',
+    '.json',
+    '.snap',
+  ],
+  setupFiles: ['<rootDir>/enzyme.js'],
+  coverageReporters: ['json', 'lcov', 'text', 'text-summary'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/mocks.js',
+    '\\.(css|less|scss)$': '<rootDir>/__mocks__/mocks.js',
+  },
+};