Enzyme: Warning: Accessing PropTypes / createClass via the main react package is deprecrated

[thomhos]

I'm having an issue with running tests (jest / ts-jest / enzyme).

The below code, produces two warnings regarding proptypes and createClass. However in this small setup I'm not even using anything I know that might trigger this. It's just a quick setup to see if my test config works. I've seen other people with the same issues, but they're actually using PropTypes, I'm not in this case.

react: 15.6.1
enzyme: 2.9.1
jest: 20.0.4
ts-jest: 20.0.10

import { shallow } from 'enzyme'
import * as React from 'react'

describe('[Component] Button', () => {
    it('renders without exploding', () => {
        const div = shallow(<div />)
        expect(div).toHaveLength(1)
    })
})

The warnings;

  console.warn node_modules/react/lib/lowPriorityWarning.js:40
    Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in  React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

  console.warn node_modules/react/lib/lowPriorityWarning.js:40
    Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class

[ljharb]

Do you have create-react-class and prop-types installed? (Also, import React from 'react', no need for the *)

[thomhos]

Thanks for the quick reply. I usually do import * as React from 'react' in all my ts classes otherwise it won't work. I also have create-react-class and prop-types installed.

When I change it to import React from 'react'here the test runs and warning goes away.

Thanks sir!

(going to find out if I can somehow change to regular imports in my ts components).

[ljharb]

Specifically, import * needs to access all the properties on React, which includes PropTypes and createClass, which then issue the warnings.

If TypeScript requires you use import * for some reason, that's a bug in TypeScript.

[mmmveggies]

is your test file a .js file?
If it is, consider just doing import React from 'react' in the .js files.
Module resolution in babel is different from ts.

also, you should via allowSyntheticDefaultImports in your tsconfig