I've been trying the below in wdio.config.js file on webdriverIO to no avail. I have:
reporters: ['dot',['mochawesome',{
outputDir: './Results', reportTitle: 'My Custom Title', showPassed: false, marge: '--saveHtml'
}],
],
mochawesomeOpts: {
includeScreenshots:true,
screenshotUseRelativePath:true
},
My package.json looks like this:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1 --reporter-options reportDir=Report,reportFilename=Test_Report",
"generateMochawesome":"marge --reporter-options reportDir=Report,reportFilename=Test_Report"
},
"dependencies": {
"#wdio/cli": "^7.9.1",
"mochawesome-report-generator": "^3.1.5",
"mocha-simple-html-reporter": "^2.0.0",
"mochawesome-merge": "^4.2.0",
"mochawesome-screenshots": "^1.7.3",
"npm": "^7.20.6"
},
"devDependencies": {
"#wdio/dot-reporter": "^7.9.0",
"#wdio/local-runner": "^7.9.1",
"#wdio/mocha-framework": "^7.9.1",
"chromedriver": "^92.0.1",
"wdio-chromedriver-service": "^7.2.0",
"wdio-mochawesome-reporter": "^4.0.0"
}
}
I went through this and ended up downgrading some packages, here is my package.json
{
"name": "webdriverio-tests",
"version": "0.1.0",
"description": "",
"private": true,
"keywords": [],
"scripts": {
"test": "wdio test/wdio.conf.ts --spec ./test/specs/integration.e2e.ts",
"generateMochawesome": "marge Results/results-0-0.json --reportTitle 'My Project Results'"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#wdio/cli": "^7.27.0",
"#wdio/dot-reporter": "^7.26.0",
"#wdio/local-runner": "^7.27.0",
"#wdio/mocha-framework": "^7.26.0",
"#wdio/spec-reporter": "^7.26.0",
"chromedriver": "^107.0.3",
"ts-node": "^10.9.1",
"typescript": "^4.9.3",
"wdio-chromedriver-service": "^8.0.0",
"wdio-mochawesome-reporter": "^4.0.0",
"wdio-wait-for": "^3.0.0"
},
"dependencies": {
"mochawesome-report-generator": "^3.1.5"
}
}
Related
Alright so my project used to work fine but ever since I updated to the latest version of tailwindcss and postcss, its giving me the above error.
Error TypeError: Invalid PostCSS Plugin found at: plugins[0]
My package.json file:
{
"name": "aniko",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"css": "postcss src/assets/css/tailwind.css -o src/assets/css/styles.css",
"start": "node server.js"
},
"dependencies": {
"#tailwindcss/aspect-ratio": "^0.2.0",
"#tailwindcss/line-clamp": "^0.2.1",
"#tailwindcss/postcss7-compat": "^2.2.17",
"#vue/cli": "^4.5.13",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"cors": "^2.8.5",
"dotenv": "^9.0.0",
"epic-spinners": "^1.1.0",
"express": "^4.17.1",
"mal-scraper": "^2.7.1",
"moment": "^2.29.1",
"node-fetch": "^2.6.0",
"postcss": "^7.0.32",
"postcss-cli": "^7.1.1",
"vue": "^2.6.11",
"vue-progressbar": "^0.7.5",
"vue-toasted": "^1.1.28"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^2.3.0",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"autoprefixer": "^9.8.8",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"tailwindcss": "^3.1.6",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
My tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
// Example content paths...
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
darkMode: "class",
theme: {
extend: {},
},
plugins: [],
}
My postcss.config.js file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
I have tried reinstalling everything and even switching back to the previous version but the error still persists.
How can I solve this?
I'm adding jest to my project and can't configure it properly.
When I run $ jest I'm getting a SyntaxError: Cannot use import statement outside a module.
I've searched for quite a while for a solution but none worked...
Can someone please help me config jest and babel?
Here are my files:
package.json
{
"name": "psyque-frontend",
"version": "1.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"actioncable-vue": "^1.5.1",
"axios": "^0.19.2",
"chart.js": "^2.9.3",
"material-design-icons-iconfont": "^5.0.1",
"qs": "^6.9.1",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-chartjs": "^3.5.0",
"vue-router": "^3.1.6",
"vuetify": "^1.5.21",
"vuetify-datetime-picker": "^1.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-eslint": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"#vue/test-utils": "^1.0.0-beta.32",
"babel-eslint": "^10.1.0",
"babel-jest": "^25.1.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"jest": "^25.1.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.1",
"ts-jest": "^25.2.1",
"vue-cli-plugin-vuetify": "^0.6.3",
"vue-jest": "^3.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.4.3"
},
"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"
]
}
jest.config.js
module.exports = {
moduleFileExtensions: ['js', 'json', 'ts', 'vue'],
transform: {
'.*\\.(js|jsx)$': 'babel-jest',
'.*\\.(ts|tsx)?$': 'ts-jest',
'.*\\.(vue)$': 'vue-jest'
},
verbose: true
};
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
};
Footer.test.js
import { mount } from '#vue/test-utils'
import Footer from './Footer'
describe('Footer', () => {
test('is a Vue instance', () => {
const wrapper = mount(Footer);
expect(wrapper.isVueInstance()).toBeTruthy();
})
});
Thank you very much for your support!
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
}
}
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);
I am using the Angular 4 CLI (v.1.0.0) and to handle testing I created some mocks that use jasmine to create a spy. In the IDE everything looks okay, however in the terminal I am getting and error that says "Cannot find name 'jasmine'".
At first I thought the issue was that jasmine wasn't added to the typings but I can see that package.json includes the import for the jasmine type def so I'm not sure what is missing.
mocks.ts
export class MockAuthService {
public login: Function = jasmine.createSpy('login');
}
export class MockHttpService {
public delete: Function = jasmine.createSpy('delete');
public get: Function = jasmine.createSpy('get');
public post: Function = jasmine.createSpy('post');
public put: Function = jasmine.createSpy('put');
}
running ng serve returns the following error messages in the terminal.
ERROR in C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts
(2,23): Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (6,24):
Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (7,21):
Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (8,22):
Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (9,21):
Cannot find name 'jasmine'.
webpack: Failed to compile.
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2016",
"dom"
]
}
}
tsconfig.spec.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"module": "commonjs",
"target": "es5",
"baseUrl": "",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
package.json
{
"name": "prod",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.0.2",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/flex-layout": "^2.0.0-beta.8",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/material": "^2.0.0-beta.3",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.0.0",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}
You are getting the error because TypeScript is trying to include the mock in the app build, and the app (rightly) doesn't know about Jasmine.
Exclude the mock from your app compilation by adding it to the exclude array in tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts",
"**/*.mock.ts"
]
}
I am not sure if you should be creating jasmine spys that way, but regardless:
The issue is with your file name
notice: tsconfig.spec.json has: "include": ["**/*.spec.ts","**/*.d.ts"]
and your file name is mocks.ts.
either change the file name to mocks.spec.ts
or add "**/*.mock.ts" and rename to something like service.mock.ts
Hope this helps.