Я пытаюсь внедрить тестирование с помощью Jest в сборку приложения с помощью Vue. Я запустил
vue add unit-jest
и, аналогично тому, что тестирует отдельные файловые компоненты с помощью руководства Jest , создал следующий простой тестовый файл (Paginator.spec.js в той же папке, что и Paginator.vue, то есть /src/components):
import { mount } from '@vue/test-utils'
import Paginator from "./Paginator.vue";
describe('Paginator', () => {
it('is a Vue instance', () => {
const wrapper = mount(Paginator);
// const a = 2;
expect(wrapper.isVueInstance()).toBeTruthy();
// expect(a).toBe(2);
})
});
Изначально у меня возникла проблема с тем, что сам Jest не смог найти файл. Позже я изменил в jest.config.js
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
на
testMatch: [
'**/*.spec.(js|ts)|**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
, и после некоторых странных глюков он нашел файл (сделал git stash, убедился, чтоприложение работает, затем git stash pop и оно начало находить файлы).
Но у меня все еще есть проблема с тем, что Jest не распознает import. Я получаю следующие ошибки независимо от того, что я запускаю jest или npm test (то есть vue-cli-service test:unit). Простой тест, подобный этому, работает нормально:
describe('tests of components', () => {
it('work', () => {
const a = 2;
expect(a).toBe(2);
})
});
, но тест, показанный в начале вопроса, приносит
Набор тестов не удалось запустить
[...]
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { mount } from '@vue/test-utils'
^
SyntaxError: Unexpected token {
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
и если я переключу порядок импорта на
import Paginator from "./Paginator.vue";
import { mount } from '@vue/test-utils'
, я получу
● Test suite failed to run
C:\NNTC\medkiosk\src\components\Paginator.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Paginator from "./Paginator.vue";
^^^^^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
(я не изменил jest.config. js любым способом, кроме расширения регулярного выражения, как показано выше)
В чем здесь проблема? Похоже, Jest не распознает import как языковую функцию ... это проблема неправильной конфигурации веб-пакета? Какой-то загрузчик отсутствует?
В проекте нет файла конфигурации webpack, потому что он был запущен с помощью vue cli. Один парень утверждает, что фактическая конфигурация в node_modules/@vue/cli-service/webpack.config.js, это не так уж и полезно:
// this file is for cases where we need to access the
// webpack config as a file when using CLI commands.
let service = process.VUE_CLI_SERVICE
if (!service || process.env.VUE_CLI_API_MODE) {
const Service = require('./lib/Service')
service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}
module.exports = service.resolveWebpackConfig()
(resolWebpackConfig, кажется, этот )
Насколько я понимаю, настройка внутреннего веб-пакета выполнена внутри vue.config.js, но я не знаю, что это начальная конфигурация для начала изменения, а также то, что на самом деле следует настроить
Я пробовал npm i babel-jest (не уверен, установлен ли он уже vue cli), добавив .babelrc с { "presets": ["latest"] } аналогично тому, как у человека с аналогичная проблема сделал, попытался добавить в vue.config.js ту часть, которую предложил другой парень из этой ветки:
configureWebpack: {
module: {
rules: [
{
loader: "babel-loader",
options: {
presets: ["latest"]
}
}
]
}
},
, а также некоторые предложения из здесь и пока я вышелидей
ниже вы можете увидеть все файлы конфигурации
бонус: если я переименую Paginator.spec.js в Paginator.spec.ts заставляет Jest показать это вместо:
● Test suite failed to run
Passing cached plugin instances is not supported in babel.loadPartialConfig()
at forEach.item (node_modules/@babel/core/lib/config/partial.js:120:13)
at Array.forEach (<anonymous>)
at loadPartialConfig (node_modules/@babel/core/lib/config/partial.js:118:27)
at TsJestTransformer.process (node_modules/ts-jest/dist/ts-jest-transformer.js:110:32)
Кто-нибудь может подсказать, как исправить конфиг? Или как его отладить? Из того, что я прочитал до сих пор, кажется, что Jest, вероятно, должен получить файл по конвейеру через babel-loader, что, похоже, не так, но я не уверен. Я знаю, я, вероятно, недостаточно знаю, как именно работает Webpack, так что подсказки, что нужно изучить, также приветствуются, я опубликую решение, когда найду его.
jest.config.js:
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue',
'ts',
'tsx'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.tsx?$': 'ts-jest'
},
transformIgnorePatterns: [
'/node_modules/'
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/*.spec.(js|ts)|**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname'
],
globals: {
'ts-jest': {
babelConfig: true
}
}
};
babel.config.js:
module.exports = {
presets: [
'@vue/app'
]
}
vue.config.js:
module.exports = {
// the default value is '/', which may be ok for production but is not suitable for local build/deploy
publicPath: ''
};
часть package.json:
"scripts": {
"lint": "vue-cli-service lint",
"serve": "vue-cli-service serve",
"test:unit": "vue-cli-service test:unit",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vuex": "^3.1.1",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.2.2",
"axios": "^0.19.0",
// more packages
},
"devDependencies": {
"@types/jest": "^23.1.4",
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-plugin-typescript": "^3.11.0",
"@vue/cli-plugin-unit-jest": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"@vue/eslint-config-typescript": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"ts-jest": "^23.0.0",
"typescript": "^3.4.3",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript"
],
"rules": {},
"parserOptions": {
"parser": "@typescript-eslint/parser"
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
tsconfig.json:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}