nativescript-vue-jest v3.0.4
nativescript-vue-jest
Jest Vue transformer with source map support and Nativescript support. Fork of vue-jest.
This transformer defaults to web templates. To change that, change globals.vue-jest.platform to the desired platform.
NOTE: This is documentation for
vue-jest@3.x
. View the vue-jest@2.x documentation
Usage
npm install --save-dev nativescript-vue-jest
Setup
To define nativescript-vue-jest
as a transformer for your .vue
files, map them to the nativescript-vue-jest
module:
{
"jest": {
"transform": {
"^.+\\.vue$": "nativescript-vue-jest"
}
}
A full config will look like this.
{
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "nativescript-vue-jest"
}
}
}
If you're on a version of Jest older than 22.4.0, you need to set mapCoverage
to true
in order to use source maps.
Example Projects
Example repositories testing Vue components with jest and vue-jest:
Supported langs
nativescript-vue-jest compiles the script and template of SFCs into a JavaScript file that Jest can run. Currently, SCSS, SASS and Stylus are the only style languages that are compiled.
Supported script languages
- typescript (
lang="ts"
,lang="typescript"
) - coffeescript (
lang="coffee"
,lang="coffeescript"
)
Global Jest options
You can change the behavior of nativescript-vue-jest
by using jest.globals
.
Tip: Need programmatic configuration? Use the --config option in Jest CLI, and export a
.js
file
babelConfig
Provide babelConfig
in one of the following formats:
<Boolean>
<Object>
<String>
Boolean
true
- Enable Babel processing.vue-jest
will try to find Babel configuration using find-babel-config.
This is the default behavior if babelConfig is not defined.
false
- Skip Babel processing entirely:
{
"jest": {
"globals": {
"vue-jest": {
"babelConfig": false
}
}
}
}
Object
Provide inline Babel options:
{
"jest": {
"globals": {
"vue-jest": {
"babelConfig": {
"presets": [
[
"env",
{
"useBuiltIns": "entry",
"shippedProposals": true
}
]
],
"plugins": [
"syntax-dynamic-import"
],
"env": {
"test": {
"plugins": [
"dynamic-import-node"
]
}
}
}
}
}
}
}
String
If a string is provided, it will be an assumed path to a babel configuration file (e.g. .babelrc
, .babelrc.js
).
- Config file should export a Babel configuration object.
- Should not point to a project-wide configuration file (babel.config.js), which exports a function.
{
"jest": {
"globals": {
"vue-jest": {
"babelConfig": "path/to/.babelrc.js"
}
}
}
}
To use the Config Function API, use inline options instead. i.e.:
{
"jest": {
"globals": {
"vue-jest": {
"babelConfig": {
"configFile": "path/to/babel.config.js"
}
}
}
}
}
tsConfig
Provide tsConfig
in one of the following formats:
<Boolean>
<Object>
<String>
Boolean
true
- Process TypeScript files using custom configuration.vue-jest
will try to find TypeScript configuration using tsconfig.loadSync.
This is the default behavior if tsConfig is not defined.
false
- Process TypeScript files using the default configuration provided by vue-jest.
Object
Provide inline TypeScript compiler options:
{
"jest": {
"globals": {
"vue-jest": {
"tsConfig": {
"importHelpers": true
}
}
}
}
}
String
If a string is provided, it will be an assumed path to a TypeScript configuration file:
{
"jest": {
"globals": {
"vue-jest": {
"tsConfig": "path/to/tsconfig.json"
}
}
}
}
Supported template languages
pug (
lang="pug"
)- To give options for the Pug compiler, enter them into the Jest configuration. The options will be passed to pug.compile().
{ "jest": { "globals": { "vue-jest": { "pug": { "basedir": "mybasedir" } } } } }
jade (
lang="jade"
)- haml (
lang="haml"
)
Supported style languages
- stylus (
lang="stylus"
,lang="styl"
) - sass (
lang="sass"
)- The SASS compiler supports jest's moduleNameMapper which is the suggested way of dealing with Webpack aliases.
scss (
lang="scss"
)- The SCSS compiler supports jest's moduleNameMapper which is the suggested way of dealing with Webpack aliases.
To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at
jest.globals['vue-jest'].resources.scss
:{ "jest": { "globals": { "vue-jest": { "resources": { "scss": [ "./node_modules/package/_mixins.scss", "./src/assets/css/globals.scss" ] } } } } }
CSS options
experimentalCSSCompile
: Boolean
Default true. Turn off CSS compilation
hideStyleWarn
: Boolean
Default false. Hide warnings about CSS compilation
resources
:
{
"jest": {
"globals": {
"vue-jest": {
"hideStyleWarn": true,
"experimentalCSSCompile": true
}
}
}
}
5 years ago