React: Test fails: memo + useState: TypeError: … is not a function

Created on 21 Dec 2018  Â·  1Comment  Â·  Source: facebook/react

What is the proper 16.7 way to test hooks?

Here's what fails (started from cra):

yarn react-scripts test --all
TypeError: (0 , _react.useState) is not a function

src/App.js:

import {memo, useState} from 'react'
export default memo(() => {
  useState(false)
  return 'OK'
})

src/App.test.js:

import React from 'react'
import App from './App'
import renderer from 'react-test-renderer'
it('renders without crashing', () => {
  const tree = renderer.create(<App />).toJSON()
  expect(tree).toMatchSnapshot()
})

Should react-test-renderer still be used @16.7?
I have it failing with reactDOM.render and react-test-renderer

test project:
clone: git clone --single-branch --branch testfail1670 --depth 1 https://github.com/haraldrudell/react-fame.git
browse: https://github.com/haraldrudell/react-fame/tree/testfail1670

Most helpful comment

The root cause is that the “newer” 16.7 does not have hooks

Resolution is to “downgrade” to react@next which as of 181220 is 16.7.0-alpha.2:
yarn add react@next react-dom@next

then lose the test renderer:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
it('renders without crashing', () => {
  const div = document.createElement('div')
  ReactDOM.render(<App />, div)
  ReactDOM.unmountComponentAtNode(div)
})

This is what package.json should have:
"react": "^16.7.0-alpha.2",
"react-dom": "^16.7.0-alpha.2",

Everybody happy

>All comments

The root cause is that the “newer” 16.7 does not have hooks

Resolution is to “downgrade” to react@next which as of 181220 is 16.7.0-alpha.2:
yarn add react@next react-dom@next

then lose the test renderer:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
it('renders without crashing', () => {
  const div = document.createElement('div')
  ReactDOM.render(<App />, div)
  ReactDOM.unmountComponentAtNode(div)
})

This is what package.json should have:
"react": "^16.7.0-alpha.2",
"react-dom": "^16.7.0-alpha.2",

Everybody happy

Was this page helpful?
0 / 5 - 0 ratings