learn-co-students / react-forms-lab-v-000 Goto Github PK

getting errors due to webpack config

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"webpack": "4.28.3"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

/Users/$$$/$$$$/react-forms-lab-v-000/node_modules/webpack (version: 3.12.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

When running npm test on this lab, I received the following error for every single test.

Issue

Error:
      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:14:11)
      at getAdapter (node_modules/enzyme/build/Utils.js:76:36)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:117:44)
      at shallow (node_modules/enzyme/build/shallow.js:19:10)
      at Context.<anonymous> (test/PoemWriter-test.js:42:23)

Research

I went online and found that Enzyme was recently updated and now it is required that configure and Adapter be called: facebook/create-react-app#3206

Solution

I proceeded to adding the following to the test/TwitterMessaage-test.js file:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

I ran npm test again and the issue no longer appeared and tests ran successfully.