-
Notifications
You must be signed in to change notification settings - Fork 24.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
classProperties isn't currenty enabled #21075
Comments
Do you have any babel dependencies that are not yet using v7.0.0? |
@hramos Is there a yarn/npm command to determine that? I have quite a few dependencies. |
I was referring to any Babel dependencies in your own package.json, as recommended in the upgrade guidelines at https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#updating-to-this-version |
For instance metro has babel-preset-fbjs as dependency which uses many babel plugins ver. 6. Could it be related this issue? |
You can run |
Something tells me that this comment still holds weight - following step 3 lets my tests run again. However, tests which require a mocked child component with relative imports fail as they still bring in the original component. Unfortunately I have no idea how to get around it. Test File example:
Jest Output:
Jest Config:
Hope this helps the investigation and gives people a workaround for now. |
even metro and fbjs-scripts uses babel ver.6. This is my config:
|
In my case, I solved the issue by the following: // babel.config.js
module.exports = {
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-regenerator',
[
'@babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
},
],
],
presets: [
'@babel/preset-env',
'module:metro-react-native-babel-preset',
'@babel/preset-react',
'@babel/typescript',
],
}; Then it caused new issue (because my component is using Button component)
It was solved by adding module.exports = {
plugins: [
'@babel/plugin-transform-flow-strip-types',
// ...
]
] That's it. By the way, versions I'm using, and some sources: // jest.config.js
module.exports = {
preset: 'react-native',
roots: ['<rootDir>'],
transform: {
'^.+\\.tsx$': 'babel-jest',
},
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
globals: {
'ts-jest': {
tsConfigFile: 'tsconfig.jest.json',
},
},
modulePaths: ['<rootDir>'],
}; Hope it'll help |
I end up doing this to make it work on testing and on running the app on Android and iOS:
module.exports = (api) => {
api.cache(true)
return {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-proposal-class-properties',
].map(require.resolve),
}
} and my jest config is : "jest": {
"preset": "react-native",
"setupFiles": [
"./jest.setup.js"
],
"modulePathIgnorePatterns": [
"e2e"
],
"testMatch": [
"<rootDir>/src/**/*.spec.js"
],
"transformIgnorePatterns": [
"node_modules/(?!react-|victory|rn-placeholder|redux-persist).+\\.js$"
],
"testResultsProcessor": "<rootDir>/node_modules/jest-html-reporter",
"coverageDirectory": "<rootDir>/reporters/coverage"
} |
👍 Ran into this issue today. |
@vitorcamachoo 's answer worked for me. I'm on RN 0.57.3, generated by |
Thank you so much @vadimkorr. You saved my life...... |
could try the official |
Continues in React native 0.57.5. |
Can confirm that adding Using Tested with |
Changing the config inside
|
I had a similar issue and solved this by deleting the // .babelrc
{
"presets": ["module:metro-react-native-babel-preset"]
} Then adding a // babel.config.js
module.exports = {
presets: ["module:metro-react-native-babel-preset"]
} |
I feel that we can close this, since it seems like it was related to an old configuration/babel issue. |
Yep, still not working for me..
here's my package.json : {
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"start-rc": "node node_modules/react-native/local-cli/cli.js start --reset-cache",
"test": "jest",
"typecheck": "tsc --noEmit -p . --pretty",
"transpile": "tsc -p . --pretty",
"format": "npm-run-all format:*",
"format:js": "prettier --write {.,**}/*.js",
"format:json": "prettier --write {.,**}/*.json",
"format:md": "prettier --write {.,**}/*.md",
"format:ts": "prettier --write {.,**}/*.{ts,tsx} && tslint --fix -p .",
"lint": "npm-run-all lint:*",
"lint:ts": "tslint -p .",
"postinstall": "solidarity",
"preversion": "react-native-version --never-amend",
"hack:types-react-navigation": "rimraf node_modules/@types/react-navigation/node_modules/@types",
"hack:types-react-native": "rimraf node_modules/@types/react-native/node_modules/@types",
"hack:types-react-test-renderer": "rimraf node_modules/@types/react-test-renderer/node_modules/@types",
"patch": "patch-package",
"prepare": "npm-run-all patch hack:*",
"ios:deploy-beta": "fastlane ios deploy_beta",
"ios:build": "fastlane ios build",
"android:run-storybook": "react-native run-android && adb reverse tcp:9090 tcp:9090 && adb reverse tcp:3000 tcp:3000 && adb reverse tcp:9001 tcp:9001",
"android:run-debug": "react-native run-android && adb reverse tcp:9090 tcp:9090 && adb reverse tcp:3000 tcp:3000",
"android:deploy-beta": "fastlane android deploy_beta",
"android:build": "fastlane android build",
"android:install-build": "adb install android/app/build/outputs/apk/release/app-release.apk",
"android:build-and-run": "ENVFILE=.env.beta yarn android:build && yarn android:install-build"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@types/chroma-js": "^1.4.1",
"@types/react-native-material-kit": "^0.5.3",
"@types/react-native-material-textfield": "^0.12.2",
"apisauce": "^1.0.2",
"chroma-js": "^2.0.3",
"i18n-js": "^3.0.11",
"lodash": "^4.17.11",
"mobx": "^4.9.2",
"mobx-logger": "^0.7.1",
"mobx-persist": "^0.4.1",
"mobx-react": "^5.4.3",
"mobx-react-form": "^1.39.1",
"mobx-utils": "5.2.0",
"moment": "^2.24.0",
"react": "^16.8.1",
"react-native": "0.57.8",
"react-native-config": "^0.11.7",
"react-native-gesture-handler": "^1.0.10",
"react-native-languages": "^3.0.0",
"react-native-material-kit": "^0.5.1",
"react-native-material-textfield": "^0.12.0",
"react-native-modal-datetime-picker": "^6.1.0",
"react-native-open-maps": "^0.3.3",
"react-native-paper": "^2.11.0",
"react-native-phone-call": "^1.0.9",
"react-native-picker-select": "^6.1.0",
"react-native-size-matters": "^0.1.6",
"react-native-splash-screen": "3.1.1",
"react-native-tab-view": "^1.3.2",
"react-native-vector-icons": "^6.2.0",
"react-navigation": "^3.2.1",
"react-powerplug": "^1.0.0",
"reactive-records": "^0.1.13"
},
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-typescript": "^7.3.3",
"@babel/runtime": "^7.0.0",
"@types/i18n-js": "^3.0.1",
"@types/jest": "23.3.2",
"@types/lodash": "^4.14.121",
"@types/react": "16.7.7",
"@types/react-native": "0.57.13",
"@types/react-native-tab-view": "^1.0.4",
"@types/react-navigation": "2.13.5",
"@types/react-test-renderer": "16.0.3",
"babel-jest": "^24.5.0",
"husky": "^1.3.1",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "0.51.1",
"npm-run-all": "4.1.5",
"patch-package": "5.1.1",
"postinstall-prepare": "1.0.1",
"prettier": "1.12.1",
"react-devtools-core": "3.4.3",
"react-dom": "16.5.0",
"react-native-version": "^2.6.7",
"react-test-renderer": "16.6.3",
"rimraf": "2.6.2",
"solidarity": "2.1.0",
"ts-jest": "^24.0.0",
"tslint": "5.11.0",
"tslint-config-prettier": "1.15.0",
"typescript": "3.0.3"
},
"husky": {
"hooks": {
"pre-commit": "yarn lint && yarn typecheck",
"pre-push": ""
}
},
"jest": {
"preset": "react-native",
"testURL": "http://localhost/",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "./test/transform.js"
},
"testRegex": "/.*\\.spec\\.(ts|js)$",
"transformIgnorePatterns": ["node_modules/(?!(react-native-size-matters)/)"],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"collectCoverage": false,
"coverageReporters": [
"json",
"json-summary",
"lcov",
"text-summary",
"html"
],
"collectCoverageFrom": [
"src/**/*.ts"
],
"coverageDirectory": "test/coverage",
"setupFilesAfterEnv": [
"<rootDir>test/setup.ts"
]
},
"rnpm": {
"assets": [
"./app/assets/fonts/"
]
}
} transform.js const config = require("../babel.config.js")
module.exports = require("babel-jest").createTransformer(config) And my babel.config.json : module.exports = {
presets: [
['@babel/preset-env', {targets: {node: 'current'}}],
'@babel/preset-typescript',
"module:metro-react-native-babel-preset",
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-optional-catch-binding"
],
[
"@babel/plugin-syntax-dynamic-import"
],
[
"@babel/plugin-proposal-class-properties",
{ "loose": true }
]
]
}; I would like to transpile my code with Babel instead of ts-jest because I want to be able to run tests even with type-related errors. EDIT : finally got this working by specifying "transformIgnorePatterns": ["node_modules/(?!(react-native|react-native-size-matters|react-native-vector-icons|react-native-material-textfield|react-native-languages|react-native-open-maps|react-native-tab-view|react-native-modal-datetime-picker|react-native-modal|react-native-animatable|react-navigation-stack|react-native-screens|react-native-gesture-handler|NativeModules|@react-navigation|react-native-phone-call|react-navigation-tabs)/)"] in package.json and in test/setup.ts : // we always make sure 'react-native' gets included first
import 'react-native'
import { NativeModules as RNNativeModules } from 'react-native'
RNNativeModules.UIManager = RNNativeModules.UIManager || {}
RNNativeModules.UIManager.RCTView = RNNativeModules.UIManager.RCTView || {}
RNNativeModules.RNGestureHandlerModule = RNNativeModules.RNGestureHandlerModule || {
State: { BEGAN: 'BEGAN', FAILED: 'FAILED', ACTIVE: 'ACTIVE', END: 'END' },
}
declare global {
var __TEST__
}
// We need to mock native modules because they dont all export JS when published...
jest.mock('react-native-config', () => {
return {}
})
jest.mock('react-native-languages', () => ({
RNLanguages: {
language: 'fr',
languages: ['fr'],
},
}))
jest.mock('NativeModules', () => ({
UIManager: {
RCTView: () => ({
directEventTypes: {}
})
},
PlatformConstants: {},
KeyboardObserver: {},
RNGestureHandlerModule: {
attachGestureHandler: jest.fn(),
createGestureHandler: jest.fn(),
dropGestureHandler: jest.fn(),
updateGestureHandler: jest.fn(),
State: {},
Directions: {}
}
})) Hope this can help someone :) |
@JoshuaKelly been trying to fix this for hours. Thank you soooooooo much for sharing your fix. |
…) (#55) * Updated react native dependencies. * Updated babel dependencies. Removed the caret from react and react-native beacause of incorrect peer dependencies. * Changed from .babelrc to babel.config.js (based on facebook/react-native#21075). * Add mock prefix to allow out of scope referencing (jestjs/jest#2567) * Mock the async-storage module. * Added explanation to README. * Changed version to 2.0.0 as it is a breaking change.
thx |
Environment
Run
react-native info
in your terminal and paste its contents here.Description
After update to latest react-native version (0.57.0), every test that I run, throws the same error related with some missing plugin (
@babel/plugin-proposal-properties
)and my jest configuration is:
The text was updated successfully, but these errors were encountered: