unit-testing - 自 ag-grid 集成以来 Jest vuejs 崩溃

Question

我在我的项目 vuejs 中使用测试 Jest 测试登录页面:

import Vuex from "vuex";
import { shallowMount, createLocalVue } from "@vue/test-utils";
import LoginForm from "@/components/LoginForm.vue";
import store from "@/store";

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

describe("LoginForm.vue", () => {
    it("input id and password exist", () => {
        const wrapper = shallowMount(LoginForm, {
            mocks: {
                $t: () => {}
            },
            store,
            localVue
        });
        //const div = wrapper.find("el-input");

        expect(wrapper.find("#inputId").exists()).toBeTruthy();
        expect(wrapper.find("#inputPassword").exists()).toBeTruthy();
    });
});

然后通过 run test:unit-coverage 启动它(在 json 包中:"test:unit-coverage": "jest --clearCache && vue-cli-service test:单元——覆盖范围")

很好，直到在项目中添加 ag-grid-vue...

现在我有一个错误

 FAIL  tests/unit/specs/login.spec.js
  ● Test suite failed to run

    C:\DevSources\node_modules\ag-grid-vue\lib\AgGridVue.js:20
    import { Component, Prop, Vue } from 'vue-property-decorator';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      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> (node_modules/ag-grid-vue/main.js:6:10)

我尝试更改配置，但错误已经存在

开 Jest .config.js :

module.exports = {
    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "vue"],
    transform: {
        "^.+\\.vue$": "vue-jest",
        ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
            "jest-transform-stub",
        "^.+\\.jsx?$": "babel-jest"
    },
    moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1"
    },
    snapshotSerializers: ["jest-serializer-vue"],
    testMatch: [
        "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
    ],
    testURL: "http://localhost/"
};

babel.config.js :

module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"]
};

感谢您的帮助。

Answer 1

您可以尝试在jest.config.js 文件中使用transformIgnorePatterns

transformIgnorePatterns: [
    "node_modules/(?!(ag-grid-vue)/)"
]