TypeError: Cannot read property 'PureComponent' of undefined When imported by jest test

wontheone1 commented 4 years ago

disclaimer: I am not a frontend dev or js dev so I might be missing something basic...

I used Blurhash successfully in one of my component, but trying to import that component or Blurhash component in my .tsx test file gives me an error.

I run

yarn jest --watch

my test code is

import * as React from "react";
import { Blurhash } from "react-blurhash";
...

Test output is like

● Test suite failed to run

    TypeError: Cannot read property 'PureComponent' of undefined

      1 | import * as React from "react";
    > 2 | import { Blurhash } from "react-blurhash";
        | ^
      3 | import { BlurhashCanvas } from "react-blurhash";
      4 | import { shallow } from 'enzyme';
      5 | import { cleanup, fireEvent, render } from "@testing-library/react";

      at Object.<anonymous> (node_modules/react-blurhash/src/BlurhashCanvas.tsx:11:51)
      at Object.<anonymous> (node_modules/react-blurhash/src/Blurhash.tsx:3:1)
      at Object.<anonymous> (node_modules/react-blurhash/src/index.ts:1:1)
      at Object.<anonymous> (src/__tests__/components/mytest.test.tsx:2:1)

Looking at your repository's package.json, react is only dev dependency but not included as a real dependency. Could it be an issue? Again... I don't know much about JS development so I might be doing something wrong...

my dependencies in package.json look like

  "dependencies": {
    "@testing-library/jest-dom": "^5.1.1",
    "@testing-library/react": "^9.4.0",
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.5",
    "blurhash": "^1.1.3",
    "react": "^16.12.0",
    "react-blurhash": "^0.1.2",
    "react-content-loader": "^5.0.1",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@types/enzyme": "^3.10.5",
    "@types/jest": "^25.1.2",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "jest": "^25.1.0",
    "parcel-bundler": "^1.12.4",
    "prettier": "^1.19.1",
    "react-testing-library": "^8.0.1",
    "ts-jest": "^25.2.0",
    "tslint": "^6.0.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^4.2.0",
    "typescript": "^3.7.5"
  }

airhorns commented 4 years ago

This burnt me as well, would be awesome to get that patch in if it's acceptable!

zeroxme commented 4 years ago

would be great to have an update patch for this error?

kenpowers-signal commented 4 years ago

This currently breaks react-blurhash in Electron when code isn't bundled. It also throws on createElement being undefined.

alouini333 commented 4 years ago

Same issue here. Anyone got a solution?

zeroxme commented 4 years ago

this should work: https://github.com/zeroxme/react-blurhash

LukyVj commented 4 years ago

Hey anyone at WOLT would like to merge the fix?

cc @nygardk @muescha

LukyVj commented 4 years ago

Thanks to @zeroxme you can yarn add zeroxme/react-blurhash in order to avoid the error.

nygardk commented 4 years ago

Hello! Sorry about addressing this taking so long. I just published v0.1.3. Can you verify if it works now as expected?

LukyVj commented 4 years ago

Hey @nygardk ! Thanks for your answer!

I confirm, v0.1.3 is working as intended 👍 ✅

nygardk commented 4 years ago

Hey @nygardk ! Thanks for your answer!

I confirm, v0.1.3 is working as intended 👍 ✅

Thanks 👍 !

woltapp / react-blurhash

TypeError: Cannot read property 'PureComponent' of undefined When imported by jest test #4