"Could not auto-detect a React renderer." when bundled with webpack

See original GitHub issue
  • react-hooks-testing-library version: 5.0.0
  • react-test-renderer version: 16.14.0
  • react version: 16.14.0
  • node version: 10.x
  • npm (or yarn) version: yarn 1.22

Relevant code or config:

import { renderHook } from '@testing-library/react-hooks';

What you did:

Use @testing-library/react-hooks in code bundled for the browser with webpack.

What happened:

Uncaught Error: Could not auto-detect a React renderer. Are you sure you've installed one of the following
    - react-dom
    - react-test-renderer
  at webpack:///node_modules/@testing-library/react-hooks/lib/pure.js:58:1 <- test/karma.tests.js:16233:5

Full CI error log: https://app.circleci.com/pipelines/github/mui-org/material-ui/36491/workflows/08a2e3dd-21aa-474f-86cf-6458c9dd552e/jobs/217134/steps Bundle: https://circle-production-customer-artifacts.s3.amazonaws.com/picard/53f31667f7d05ec7d09d22f4/6004879acb28353dcdb73883-0-build/artifacts/artifact-file/test/karma.tests.js?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20210117T203410Z&X-Amz-SignedHeaders=host&X-Amz-Expires=60&X-Amz-Credential=AKIAJR3Q6CR467H7Z55A%2F20210117%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=c5763f2e26dc5cd18e317195fc40c5fe06f8e96a1d2b2c842a5edf5e393ec2ee

Reproduction:

https://github.com/eps1lon/testing-libray-hooks-dynamic-require

Problem description:

We want to run tests in a real browser i.e. an environment where React can run (using karma-mocha). Some of those tests uses @testing-library/react-hooks.

Suggested solution:

Remove dynamic require(variable). require can only be bundled by webpack if called with a string literal.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
mpeypercommented, Jan 18, 2021

Happy to add a note to the release docs about bundling.

Edit: done

0reactions
mpeypercommented, Jan 18, 2021

Yeah agreed. Let’s update the error wording and keep an ear out for more affected users.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Installation | React Hooks Testing Library
react-hooks-testing-library does not come bundled with a version of react to allow you to install the specific version you want to test against....
Read more >
When using react.js webpack-dev-server does not bundle
When using react.js webpack-dev-server does not bundle ... import {render} from 'react-dom';class App extends React.Component { render () {
Read more >
react-responsive - npm
Start using react-responsive in your project by running `npm i ... minResolution="2dppx"> {/* You can also use a function (render prop) as a ......
Read more >
Existing react app compiles but does not render with webpack ...
I set up webpack for my existing react app. This is my first time using webpack. The dev server compiles with no warinings...
Read more >
Step by step guide (v9) - react-i18next documentation
react-i18next will run in any environment without you having to do ... ReactDOM.render( ... c) Handle rendering while translations are not yet loaded....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found