logaretm / vee-validate

✅ Painless Vue forms
https://vee-validate.logaretm.com/v4
MIT License
10.79k stars 1.26k forks source link

[May be a bug.] I want to test with Jest in Vue.js. #2473

Closed sasasa closed 4 years ago

sasasa commented 4 years ago
  import { shallowMount, createLocalVue } from '@vue/test-utils'
  import { FormTodo } from '@/components'
  import { ValidationProvider, ValidationObserver, localize, extend } from 'vee-validate';
  import { required, min } from 'vee-validate/dist/rules'
  import ja from 'vee-validate/dist/locale/ja.json'

  extend('required', {
    ...required,
  })
  extend('min', {
    ...min,
  })
  localize('ja', ja)

  const localVue = createLocalVue()
  localVue.component('ValidationProvider', ValidationProvider)
  localVue.component('ValidationObserver', ValidationObserver)

  describe('Todo', () => {
    describe('Initialize', () => {
      let props
      beforeEach(() => {
        props = {
          submitWord: 'test submit',
        }
      })

      it('mount', () => {
        const wrapper = shallowMount(FormTodo, {
          propsData: props,
          localVue,
        })
        expect(wrapper.isVueInstance()).toBe(true)
      })
    })
  })

log

● Test suite failed to run

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 option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/app/todolist/node_modules/vee-validate/dist/rules.js:690
export { alpha$1 as alpha, alpha_dash, alpha_num, alpha_spaces, between, confirmed, digits, dimensions, email, excluded, ext, image, integer, is, is_not, length, max, max_value, mimes, min, min_value, numeric, oneOf, regex, required, required_if, size };
^^^^^^

SyntaxError: Unexpected token export

  2 | import { FormTodo } from '@/components'
  3 | import { ValidationProvider, ValidationObserver, localize, extend } from 'vee-validate';
> 4 | import { required, min } from 'vee-validate/dist/rules'
    | ^
  5 | import ja from 'vee-validate/dist/locale/ja.json'
  6 |
  7 | extend('required', {

  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 Object.<anonymous> (tests/unit/components/FormTodo.spec.js:4:1)
logaretm commented 4 years ago

This is a duplicate of #2310

The reason is that Jest excludes transpilation for node_modules, the rules use ES6 exports to achieve tree-shaking. You can find a solution here:

https://github.com/logaretm/vee-validate/issues/2310#issuecomment-529430032

sasasa commented 4 years ago

thank you very much!