Unknown prop warning on allowed props

[bsr203]

In some of my jest (snapshot) test, I see this warning.

Running 4 test suites...Warning: Unknown prop className on <div> tag. Remove this prop from the element. For details, see https..../react-unknown-prop
    in div (created by Container)

but, className is how react set the class attribute. I do understand the change brought by react 15.0.2, but not sure why getting this for className.

I get same warning for more attributes

Running 1 test suite...Warning: Unknown prop className on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Container)
    in Container (created by ..)
    ...
    in Unknown
Warning: Unknown props role, autoComplete, noValidate, onSubmit on <form> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in form (created by Form)
    in div (created by Card)
    ...
    in Unknown
Warning: Unknown props name, type, value, onChange on <input> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in input (created by Input)

I use jest 14.1.0 and react 15.3.1.

[aweary]

Can you share your component/test case that's getting these warnings? Or better yet, a repo reproducing this

[Xesued]

I am also getting this. I'll try to get a test repo later today. Also getting:

Warning: Unknown prop `onClick` on <li> tag. ...

[tonygentilcore]

Same issue here.

Jest output:

 PASS  __tests__/integration.spec.js
  ● Console

    console.error node_modules/fbjs/lib/warning.js:36
      Warning: Unknown prop `className` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
          in div (created by App)
          in App
          in Provider

Simplified repro...

App.jsx:

export default class App extends Component {
  render() {
    return (<div className="foo">bar</div>)
  }
}

integration.spec.js:

import React from 'react'
import {Provider} from 'react-redux'
import renderer from 'react-test-renderer'
import {applyMiddleware, createStore} from 'redux'
import thunk from 'redux-thunk'

import App from '../components/App'
import rootReducer from '../reducers'

jest.mock('react/lib/ReactDefaultInjection')

const store = createStore(rootReducer, {}, applyMiddleware(thunk))

describe('foo', () => {
  it('bar', () => {
    const component = renderer.create(
      <Provider store={store}>
        <App />
      </Provider>
    )
    expect(component.toJSON()).toMatchSnapshot()
  })
})

[aweary]

Thanks @tonygentilcore, I'll try and reproduce. Why are you mocking ReactDefaultInjection?

[tonygentilcore]

That seems suspicious, doesn't it. It was suggested in some SO post or GH issue as a workaround for the following. If I remove it, the test spits:

 FAIL  __tests__/integration.spec.js
  ● Test suite failed to run

    Invariant Violation: ReactCompositeComponent: injectEnvironment() can only be called once.

      at invariant (node_modules/fbjs/lib/invariant.js:38:15)
      at Object.ReactComponentEnvironment.injection.injectEnvironment (node_modules/react/lib/ReactComponentEnvironment.js:36:60)
      at Object.inject (node_modules/react/lib/ReactDefaultInjection.js:79:28)
      at Object.<anonymous> (node_modules/react/lib/ReactDOM.js:28:23)
      at Object.<anonymous> (node_modules/react-dom/index.js:3:18)
      at Object.<anonymous> (node_modules/draft-js/lib/DraftEditorTextNode.react.js:23:16)
      at Object.<anonymous> (node_modules/draft-js/lib/DraftEditorLeaf.react.js:24:27)
      at Object.<anonymous> (node_modules/draft-js/lib/DraftEditorBlock.react.js:27:23)
      at Object.<anonymous> (node_modules/draft-js/lib/DraftEditorContents.react.js:26:24)
      at Object.<anonymous> (node_modules/draft-js/lib/DraftEditor.react.js:29:27)
      at Object.<anonymous> (node_modules/draft-js/lib/Draft.js:22:19)
      at Object.<anonymous> (reducers/ui.js:1:232)
      at Object.<anonymous> (reducers/index.js:5:37)
      at Object.<anonymous> (__tests__/integration.spec.js:23:1018)
      at process._tickCallback (internal/process/next_tick.js:103:7)

[aweary]

@tonygentilcore check out #7386, that's expected behavior at the moment. You can't use react-test-renderer with another library that uses react-dom, as they both try to call injectEnvironment. This will be resolved in the 15.4 release 👍

Are you able to reproduce the unknown prop warning at all without mocking ReactDefaultInjection? You'd have to test with components that do not use react-dom.

It was suggested in some SO post or GH issue as a workaround for the following

I have a feeling that is likely what's causing this issue. If you know where you saw that recommendation I'd be super interested in knowing.

[aweary]

@bsr203 @Xesued were you guys using the same workaround?

[bsr203]

Yes. I too use the workaround. I came to know about it through the recommendtations in this issue jestjs/jest#1353

I guess we have to tolerate this warning till 15.4.0

[Xesued]

Yes. I was.

On Sep 4, 2016 7:25 PM, "bsr203" [email protected] wrote:

Yes. I too use the workaround. I came to know about it through the
recommendtations in this issue jestjs/jest#1353
jestjs/jest#1353

I guess we have to tolerate this warning till 15.4.0

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#7601 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABF8RXPKMyTfLTWyHaBPGo7-wh1hUw9Oks5qm2GTgaJpZM4JvELq
.

[aweary]

Thanks guys, I'm going to close this out for now since 15.4 will resolve the root cause and this workaround isnt really recommended.

[bsr203]

@aweary I see a new rc at npm

latest: 15.3.1
next: 15.3.2-rc.1

I do not see a 15.4 branch and not sure the fix is already in master or 15.3.2-rc.1. Can you please comment whether the fix is in 15.3.2-rc.1, else available at master?

[gaearon]

The issue with injectEnvironment was fixed in React 15.4.0 which is out today.
If you were mocking ReactDefaultInjection (which is unsupported) please remove those changes, and it will work.