A Jest test framework combined with Vuejs to render the test report, and a good combination with the nightmare
Install it via npm:
npm install jest-vue-report
And include in your jest project: (If not Jest Project, you can follow this doc to build it as fast as your can)
The reporter integrates with Jest in form of a testResultsProcessor. Put this into your projects package.json
:
"jest": {
"testResultsProcessor": "jest-vue-report"
}
Then can also config custom report site, e.g. put this in your package.json
, (default site -> <root>/test/jestReport
)
"jest-vue-report": {
"report-site": "test/vueReport"
}
With customer config, the test report will auto genente to <root>/test/vueReport
Then, just use Jest as usual, e.g. put this in your package.json
"scripts": {
"test": "jest"
}
Then, simply run npm test
Built files are meant to be served over an HTTP server.
Then, you should go to the reporter folder and use http-server to build an HTTP server conveniently.
There is a good combination of the nightmare screenshots with jest-vue-report
Example
jest test file
import Nightmare from 'nightmare'
import { getScreenshotUrl } from 'jest-vue-report'
jest.setTimeout(15000)
describe('Login', () => {
let page = null
var path = require('path')
beforeEach(() => {
page = Nightmare({show: true}).viewport(1024, 768)
page.goto('http://www.xingyun361.com')
})
it('should login with failure', async () => {
await page
.click('.btn.login_btn1.l')
.wait('#username_0')
.click('#login_bt')
.wait('#area_error_msg')
await page.screenshot(getScreenshotUrl('should login with failure'))
const content = await page.wait('#area_error_msg')
.evaluate(() => document.querySelector('#area_error_msg').innerHTML).end()
await page.end()
console.log('content:>>' + content)
expect(content).toBe('请输入用户名')
})
})
Note: unitName in
getScreenshotUrl(unitName)
should be unique name.
MIT