jest-vue-preprocessor icon indicating copy to clipboard operation
jest-vue-preprocessor copied to clipboard

Tests fail when Code splitting components

Open LanFeusT23 opened this issue 6 years ago • 5 comments

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

Current behavior Testing vue components with code splitting is throwing on the import

Minimal reproduction of the problem with instructions Create a component that async loads other components:

<script>
    const Modal = () => import(/* webpackChunkName: "Modal" */ "@/pages/common/Modal.vue");

    export default {
        name: "TileEditModal",
        components: {
            Modal
        },
        data() {
            return 
        },
        methods: {
            test() {
                return true;
            }
        }
    }
</script>

Create a tests, upon running jest it throws an exception on the import image

LanFeusT23 avatar Jul 10 '17 20:07 LanFeusT23

same problem here;

brenohq avatar Aug 10 '17 02:08 brenohq

@LanFeusT23 did you come up with a solution for this?

maxmilton avatar Oct 07 '17 07:10 maxmilton

Nope, we decided not to code split down to components. We code split on routes only so we don't have this issue. It was ok with us because our modals were really small and code splitting was not gaining much.

LanFeusT23 avatar Oct 10 '17 16:10 LanFeusT23

@LanFeusT23 here is what you need to do:

yarn add --dev babel-plugin-dynamic-import-node

Then in the .babelrc-file

  "presets" [
    // ...
  ],

  // add env specific configuration
  "env": {
    "test": {
      "plugins": [
        "transform-runtime",
        "dynamic-import-node" // <-- this is the important line
      ]
    }
  }

rudionrails avatar Oct 30 '17 15:10 rudionrails

This is still a problem for me. The solution posted by @rudionrails does not work.

garytryan avatar Mar 22 '18 01:03 garytryan