search

soywod / react-pin-field

📟 React component for entering PIN codes.
https://soywod.github.io/react-pin-field/
MIT License
413 stars 24 forks source link

Problems with jest testing #18

Closed MatheusRyuki closed 4 years ago

MatheusRyuki commented 4 years ago

There are problems in testing the component in jest, he says that there is a syntax error, when I remove the import from the pin-field, the problem does not occur.

The error: image

My dependencies and devDependencies: "dependencies": { "@babel/preset-env": "^7.10.2", "@loadable/component": "^5.12.0", "@material-ui/core": "^4.10.2", "@material-ui/lab": "^4.0.0-alpha.56", "axios": "^0.19.2", "brazilian-values": "^0.7.5", "js-cookie": "^2.2.1", "react": "^16.13.1", "react-dom": "^16.13.1", "react-pin-field": "^1.0.3", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-router-guards": "^1.0.2", "react-scripts": "3.4.0", "styled-components": "^5.1.1", "typescript": "~3.9.5", "yup": "^0.29.1" },

"devDependencies": { "@types/loadable__component": "^5.10.0", "@types/react-router": "^5.1.7", "@types/react-router-dom": "^5.1.5", "@types/styled-components": "^5.1.0", "@types/yup": "^0.29.3", "@typescript-eslint/eslint-plugin": "^3.3.0", "@typescript-eslint/parser": "^3.3.0", "eslint-config-prettier": "^6.11.0", "eslint-config-react": "^1.1.7", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react-hooks": "^4.0.4", "eslint-plugin-testing-library": "^3.3.0", "jest-environment-jsdom-sixteen": "^1.0.3", "prettier": "^2.0.5", "t": "^0.5.1", "@testing-library/jest-dom": "^5.10.1", "@testing-library/react": "^10.2.1", "@testing-library/user-event": "^12.0.2", "@types/jest": "^26.0.0", "@types/js-cookie": "^2.2.6", "@types/node": "^14.0.13", "@types/react": "^16.9.37", "@types/react-dom": "^16.9.8" }

soywod commented 4 years ago

It's because React PIN Field tests are written in TypeScript and needs ts-jest to work. You should also adapt your jest conf, check React PIN Field's one. Let me know if it fixes your problem.

MatheusRyuki commented 4 years ago

Thanks for the answer @soywod , however, I saw that it is necessary to use Enzyme in this configuration that you indicated. But I use the testing-library, would there be a problem?

soywod commented 4 years ago

No it should not be a problem. In fact in the jest conf the most important is this line:

module.exports = {
  preset: "ts-jest",
  ...
}
MatheusRyuki commented 4 years ago

OK, I tried this and it worked normal.