First test with enzyme.(Unit test)

[cartooncatfish]

Test code: app.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import { shallow } from 'enzyme';

import App from './App';

it('renders without crashing', () => {
	const div = document.createElement('div');
	ReactDOM.render(<App />, div);
	ReactDOM.unmountComponentAtNode(div);
});

it('App renders without crashing version 2, test with the enzyme', () => {
	const component = shallow(<App />);
	expect(component.exists()).toEqual(true);
});

Errors:

FAIL  src/App.test.js
  ● App renders without crashing version 2, test with the enzyme

    
          Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.
          To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
          before using any of Enzyme's top level APIs, where `Adapter` is the adapter
          corresponding to the library currently being tested. For example:
    
          import Adapter from 'enzyme-adapter-react-15';
    
          To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html
      
          
      at validateAdapter (node_modules/enzyme/build/validateAdapter.js:16:11)
      at getAdapter (node_modules/enzyme/build/getAdapter.js:27:36)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:168:50)
      at shallow (node_modules/enzyme/build/shallow.js:21:10)
      at Object.<anonymous>.it (src/App.test.js:14:40)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at process._tickCallback (internal/process/next_tick.js:109:7)

  ✓ renders without crashing (3ms)
  ✕ App renders without crashing version 2, test with the enzyme (1ms)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        0.151s, estimated 1s
Ran all test suites.

[cartooncatfish]

Solved

Ref: wmonk/create-react-app-typescript#185
The previous settings as follows does not working.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

Should be changed to:

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

It's quite strange, two setupTests.js file in the system, one is just under the root directory while the other is in the src directory. These two files have different content.
The first one has

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

The second one has

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

But it works!!

[cartooncatfish]

I try to avoid the duplications and delete one of them to see which is really needed.
The result surprises me.
The one pays effect is the one under the src directory with the old settings.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

I have already tried this, but it did not work at that time.

Tricky!!

I tried in another terminal, it works fine as well.
I only keep this one.
If I got any issues, I am going to add more content to this issue.