I try to make the linter work on Atom, but nothing happens :/
(I get used to work with eslint on Atom but for a new React Native project I'm totally stuck ...) I work with linter and linter-eslint packages for Atom.
Thanks for any help :)
Here is my package.json, configured as it is said here:
https://github.com/intellicode/eslint-plugin-react-native
{
"name": "RNApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"eslint": "^3.4.0",
"eslint-plugin-react": "^6.2.0",
"eslint-plugin-react-native": "^2.0.0",
"react": "15.3.1",
"react-native": "0.32.0"
},
"plugins": [
"react",
"react-native"
],
"ecmaFeatures": {
"jsx": true
},
"rules": {
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"react-native/no-inline-styles": 2,
"react-native/no-color-literals": 2
}
}
I had to replace this:
"ecmaFeatures": {
"jsx": true
},
by this:
"eslintConfig": {
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
},
Related
I am trying to install vue-test-utils and jest in a project. It is vue-cli project but I did not setup the testing when I ran it initially.
It finds the test but fails on the import statements.
Here is the error.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
It is almost certainly a babel thing (I think) but I cannot work it out.
Here are the config files.
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
jest.config.js
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
transformIgnorePatterns: [
'/node_modules/'
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/'
}
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-moment": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#vue/cli-plugin-babel": "^3.6.0",
"#vue/cli-plugin-eslint": "^3.6.0",
"#vue/cli-service": "^3.6.0",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.7.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"jest": "^24.7.1",
"jest-transform-stub": "^2.0.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.30.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Well, looks like you need global section in your jest config. I'm using vue + ts, so my globals looks like that:
globals: {
'ts-jest': {
babelConfig: true
}
}
Attempting to create a new vue project. I run:
yarn global add #vue/cli
vue create my-project
Then:
cd my-project
yarn serve
Right out of the gate I'm getting an error that I cannot resolve:
Cannot find module '#babel/preset-env/data/built-ins.json
In the auto-generated package.json (below) #babel/preset-env isn't listed as a dev dependency, but I assume it gets added automatically as a dependency of some of the vue stuff? Any idea what is going on?
Here are auto-generated files:
package.json
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.6"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.5.0",
"#vue/cli-plugin-eslint": "^3.5.0",
"#vue/cli-service": "^3.5.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
I've initialized a new react-native project with RN Version 0.59.
I've setup eslint (with airbnb-ruleset), babel and flow:
package.json:
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/runtime": "^7.4.2",
"#react-native-community/eslint-config": "^0.0.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.5.0",
"babel-preset-flow": "^6.23.0",
"eslint": "^5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"flow-bin": "^0.96.0",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "^16.8.5"
},
babel.config.js
module.exports = {
presets: ["module:metro-react-native-babel-preset", "flow"]
};
eslintrc.json
{
"env": {
"es6": true,
"node": true,
"jest": true
},
"extends": "airbnb",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js"] }]
}
}
Issue:
If I run eslint, I got the following errors:
8:17 error Parse errors in imported module '../app/App': Unexpected token Props (19:6) import/no-named-as-default
8:17 error Parse errors in imported module '../app/App': Unexpected token Props (19:6) import/no-named-as-default-member
How can I configure eslint in right way to recognize that this is a flow-type declaration?
I've figured it out.
First I've installed eslint-plugin-flowtype
After that, I've edited .eslintrc.json like this:
add parser: "babel-eslint",
add to extends"plugin:flowtype/recommended"`
add to plugins : "flowtype"
After that, it works.
File looks like this now:
{
"parser": "babel-eslint",
"env": {
"es6": true,
"node": true,
"jest": true
},
"extends": "plugin:flowtype/recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"flowtype"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js"] }]
}
}
I have been happily running tests on a Protractor/Jasmine2 framework. Now, I've started a new project and used the same framework - however, when I tried to run the first spec, I received a 'Spec not found' message.
I have tried all sorts of things....explicit file locations, having spec.js in the root of the project, pushing to BitBucket, deleting the project off my machine and re-cloning. Running on VS Code and Atom makes no difference.
I've stripped the spec.js to something so simple in case it something there but I'm blowed if I can spot anything! Please see conf.js, spec.js and Package.json. Sorry for all of the // in conf.js - kept on stripping things out!!
Hoping for some eagle-eyed person...!! Thanks
PACKAGE.json
{
"name": "jl_autotests",
"version": "1.0.0",
"description": "Autotests",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://git#bitbucket.org/davred61/jl_autotests.git"
},
"keywords": [
"Cucumber",
"gherkin",
"cuke",
"protractor",
"angular",
"selenium",
"endtoend",
"report",
"e2e",
"javascript"
],
"author": "D Redmayne",
"license": "ISC",
"homepage": "https://bitbucket.org/davred61/jl_autotests#readme",
"dependencies": {
"Express": "^3.0.1",
"angular": "^1.6.6",
"angularjs": "0.0.1",
"cucumber": "^3.1.0",
"glob": "^7.1.2",
"gulp": "^3.9.1",
"lodash": "^4.17.4",
"material-design-lite": "^1.3.0",
"moment": "^2.19.2",
"pretty": "^2.0.0",
"protractor": "^5.2.0",
"protractor-cucumber-framework": "^4.1.1",
"protractor-image-comparison": "^1.3.0"
},
"devDependencies": {
"chai": "^4.1.2",
"express": "^4.16.2",
"gulp-protractor": "^4.1.0",
"jasmine-reporters": "^2.2.1",
"jasmine-spec-reporter": "^4.2.1",
"protractor-jasmine2-html-reporter": "0.0.7",
"protractor-jasmine2-screenshot-reporter": "^0.5.0",
"restify": "^6.3.2"
}
}
Conf.js
//var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
exports.config = {
//seleniumAddress: 'http://localhost:444/wd/hub',
//directConnect: true,
capabilities: {
cssSelectorsEnabled: true,
'browserName': 'chrome'
},
specs:['spec.js'],
allScriptsTimeout: 60000,
getPageTimetout: 30000,
framework: 'jasmine2',
//onPrepare: function() {
//jasmine.getEnv().addReporter(
//new Jasmine2HtmlReporter({
//takeScreenshots: true,
//savePath: './Reports',
//fileName: 'HomeProfile'
//})
//)
//var SpecReporter = require ( 'jasmine-spec-reporter').SpecReporter;
//jasmine.getEnv().addReporter( new SpecReporter( {
//displayStacktrace: true,
//displayFailureSummary: true,
//displayPendingSummary: true,
//displaySuccessfulSpec: true,
//displayFailedSpec: true,
//displaySpecDuration: false,
//displaySuiteNumber: false,
//colors: {
//success: 'green',
//failure: 'red',
//pending: 'yellow'
// },
//customProcessors: []
//} ));
//}
};
spec.js
browser.get('https://mwac-johnlewis-dev.digitalbridge.eu/landing');
browser.sleep(10000);
Trying to get Jest v12.1.1 working with React Native v0.26.2 I'm getting this error when run npm test:
Error: Cannot find module 'ErrorUtils' from 'env.js'
Here's my package.json. I'm trying to get this working with the default react-native init AwesomeProject starter.
Is there something missing from my package.json? (are here any lines I don't need?)
EXAMPLE 1:
package.json
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "^15.0.2",
"react-native": "^0.26.2"
},
"devDependencies": {
"babel-jest": "^9.0.0",
"babel-preset-es2015": "*",
"babel-preset-react": "*",
"jest-cli": "^12.1.1"
},
"scripts": {
"test": "jest"
},
"jest": {
"scriptPreprocessor": "node_modules/react-native/jestSupport/preprocessor.js",
"setupEnvScriptFile": "node_modules/react-native/jestSupport/env.js",
"testPathIgnorePatterns": [
"/node_modules/",
"/android/",
"/ios/",
"/.idea/"
],
"testFileExtensions": [
"js"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/"
],
"verbose": true
}
}
Here's a test script.
index.android-test.js
// __tests__/index.android-test.js
'use strict';
jest
.disableAutomock()
.setMock('AwesomeProject', {})
.setMock('React', {Component: class {}});
describe('AwesomeProject', () => {
it('test something', () => {
const testJunk = true;
expect(testJunk).toEqual(true);
});
});
EXAMPLE 2:
I get a different error when I add "haste" to package.json and remove scriptPreprocessor & setupEnvScriptFile.
Error: Cannot find module 'AwesomeProject' from 'index.android-test.js'
I have no clue why I get farther ahead with the following. My previous Example 1 is following:
https://facebook.github.io/jest/docs/tutorial-react.html#content
And Example 2 with 'haste` is following:
https://github.com/fbsamples/f8app/blob/master/package.json
Really confused about why Ex 1 doesn't work.
revised package.json
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "^15.0.2",
"react-native": "^0.26.2"
},
"devDependencies": {
"babel-jest": "^9.0.0",
"babel-preset-es2015": "*",
"babel-preset-react": "*",
"jest-cli": "^12.1.1"
},
"scripts": {
"test": "jest"
},
"jest": {
"haste": {
"defaultPlatform": "android",
"platforms": [
"ios",
"android"
],
"providesModuleNodeModules": [
"react-native"
]
},
"testPathIgnorePatterns": [
"/node_modules/",
"/android/",
"/ios/",
"/.idea/"
],
"testFileExtensions": [
"js"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/"
],
"verbose": true
}
}