[youzan/vant]vue+ts+vant项目,使用Jest做单元测试报错!

2024-05-22 620 views
5

Describe the bug 我们在项目中使用了 vue2.5.x + vant + typescript 构建,并且使用了Jest做单元测试,在已构建好的项目框架中,对组件做单元测试,但在测试中,发现问题。下面是我的测试代码:

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import Home from '@/views/Home.vue';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('对Home组件进行单元测试', () => {
  let getters!: any;
  let store!: any;

  beforeEach(() => {
    getters = {
      version: '0.1.2'
    };

    store = new Vuex.Store({
      getters
    });
  });

  // 挂载组件
  const wrapper = shallowMount(Home, { store, localVue });

  afterEach(() => {
    // 销毁实例
    wrapper.destroy();
  });

  test('验证Home是一个Vue的实例', () => {
    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

Home 组件关键代码如下:

<template>
....
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Button, Icon, Popup } from 'vant';
import { Getter } from 'vuex-class';
import menuList from '@/data/menuList';
import CommonMixins from '@/utils/mixins/commonMixins';

// 声明引入的组件
@Component({
  components: {
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup
  }
})
export default class Home extends CommonMixins {  // 类方式声明当前组件
  private menuList: any = menuList;
  private activeNames: string[] = ['0'];
  private popupShow: boolean = false;
  private logoPath = require('../assets/images/Logo.svg') as string;

  @Getter('version') private version: string;

  private beforeCreate() {
    // ...
  }

  private mounted() {
    // ...
  }
}
</script>

运行 npm run test:unit ,报下面的错误:

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:

    D:\myWorks\uoko-fe-themes-mobile\node_modules\vant\es\popup\style\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import '../../vant-css/base.css';

                        ^^^^^^

    SyntaxError: Unexpected token import

应该是不能识别 import

Environment

  • Device: windows10
  • Browser: 谷歌
  • Vant Version: v1.3.8

求解决方案。

回答

9

jest 默认不支持 es6 import 语法,你可以参考 vant 配置一份 jest,或者改下 babelrc 的配置,引用 lib 目录下的 vant

6

我这边也遇到了同样的问题,有没有参考配置?

8

i've got another issue such as:

$npm test

> vcomp@1.0.2 test /Users/cdll/github/vcomp
> jest

 FAIL  test/Button.test.js
  ● Test suite failed to run

    /Users/cdll/github/vcomp/node_modules/vant/es/button/index.js:1
    import _extends from "@babel/runtime/helpers/esm/extends";
           ^^^^^^^^

    SyntaxError: Unexpected identifier

      10 |     :icon='icon'
      11 |     :icon-prefix='iconPrefix'
    > 12 |     :tag='tag'
         |               ^
      13 |     :native-type='nativeType'
      14 |     :block='block'
      15 |     :plain='plain'

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1166:56)
      at packages/Button/Button.vue:12:15
      at Object.<anonymous> (packages/Button/Button.vue:206:3)
      at Object.<anonymous> (packages/Button/index.js:4:1)
      at examples/views/Button/btnDefault.vue:3:1
      at Object.<anonymous> (examples/views/Button/btnDefault.vue:37:3)
      at Object.<anonymous> (test/Button.test.js:14:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.294 s
Ran all test suites.
(node:13944) ExperimentalWarning: The fs.promises API is experimental
npm ERR! Test failed.  See above for more details.
1

同上有没有参考配置 @chenjiahan

9

在.babelrc中添加test环境配置,修改babel-plugin-import的配置,libraryDirectory改为lib image