Я изучаю Jest с моим тестовым Vue приложением, и все идет хорошо, за исключением того, что в одном из моих components
я использую vuejs-datepicker
, и когда я запускаю тесты ниже, я получаю следующую ошибку, которую я Кажется, я не могу исправить ситуацию.
Тестовый файл
import { mount } from '@vue/test-utils'
import ShowBlogs from '@/components/showBlogs.vue'
import ActiveBlogs from '@/components/blogsActive.vue'
import AddBlog from '@/components/addBlog.vue'
import ClosedBlogs from '@/components/blogsClosed.vue'
describe('ShowBlogs.vue tests', () => {
let wrapper = null
beforeEach(() => {
wrapper = mount(ShowBlogs)
})
afterEach(() => {
wrapper.destroy()
})
it('Checks "ShowBlogs" component rendered', () => {
expect(wrapper.name()).toMatch('ShowBlogs')
})
it('Checks "Active" tab displayed on load', () => {
expect(wrapper.find(ActiveBlogs).exists()).toBeTruthy()
})
it('Checks tab labels & correct tab has "Active" class', () => {
expect(wrapper.find('h1').text()).toEqual('Articles')
expect(wrapper.findAll('li').length).toEqual(3)
expect(wrapper.findAll('li').at(0).text()).toEqual('Active blogs')
expect(wrapper.findAll('li').at(1).text()).toEqual('Closed blogs')
expect(wrapper.findAll('li').at(2).text()).toEqual('Add a new blog')
expect(wrapper.find('#activeBlogs-tab').classes()).toContain('active')
})
it('Checks "ClosedBlogs" component displayed when clicking "Closed Blogs tab"', () => {
wrapper.find('#closedBlogs-tab').trigger('click')
expect(wrapper.find(ClosedBlogs).exists()).toBeTruthy()
})
})
Ошибка
FAIL tests / unit / showBlogs. vue .spe c. js ● Не удалось запустить набор тестов
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".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config
.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
C:\Users\anton\Desktop\testProject\vueproject\node_modules\vuejs-datepicker\dist\vuejs-datepicker.esm.js:2437
export default Datepicker;
^^^^^^
SyntaxError: Unexpected token 'export'
116 |
117 | <script>
> 118 | import Datepicker from "vuejs-datepicker/dist/vuejs-datepicker.esm.js";
| ^
119 | //import * as lang from "vuejs-datepicker/src/locale";
120 | import globalVars from "../mixins/globalVars";
121 | import loader from './loader.vue';
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
at src/components/addBlog.vue:118:1
at Object.<anonymous> (src/components/addBlog.vue:232:3)
Пакет. json
{
"name": "vueproject",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit --watch",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"apexcharts": "^3.16.0",
"core-js": "^3.6.4",
"firebase": "^7.9.3",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.2",
"vue-moment": "^4.1.0",
"vue-router": "^3.1.6",
"vuefire": "^2.2.1",
"vuejs-datepicker": "^1.6.2",
"vuex": "^3.1.2"
},
"devDependencies": {
"@babel/core": "^7.8.7",
"@babel/preset-env": "^7.8.7",
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-e2e-cypress": "~4.2.0",
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-plugin-router": "~4.2.0",
"@vue/cli-plugin-unit-jest": "~4.2.0",
"@vue/cli-plugin-vuex": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"@vue/test-utils": "1.0.0-beta.31",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"vue-template-compiler": "^2.6.11"
}
}
Jest.config
module.exports = {
preset: '@vue/cli-plugin-unit-jest'
}
AddBlog. vue
<script>
import Datepicker from "vuejs-datepicker/dist/vuejs-datepicker.esm.js";
import globalVars from "../mixins/globalVars";
import loader from './loader.vue';
import moment from 'moment'
.......