DEV Community

The Jared Wilcurt
The Jared Wilcurt

Posted on • Edited on

Debugging Vue Jest tests in a browser

Edit from the future:

Okay, so this post is about jest-preview which is pretty dope, but unfortunately it currently only works with @testing-library/vue. I ran into issues with it almost immediately when testing anything beyond the simplest of components. I couldn't get any work done and had to revert back to @vue/test-utils.

I'm leaving this post up for documentation, but felt it equally important to leave it as a warning for people to avoid testing-library.


Below are the steps I did on one of my repos to get browser-based debugging of my Jest tests on Vue.js components. Specifically this is a Vue 3 repo created with Vue-CLI.

This is possible via the library jest-preview. I have not used it on a large comprehensive codebase yet, so there may be edge cases with it I haven't ran into, but as I do, I'll update this post.

  1. npm install --save-dev @testing-library/vue concurrently jest-preview wait-on
  2. npm uninstall @vue/test-utils
  3. In jest.config.js add:

    setupFilesAfterEnv: ['<rootDir>/tests/unit/setup.js'],
    transform: {
      '^.+\\.vue$': '@vue/vue3-jest',
      '^.+\\.css$': 'jest-preview/transforms/css',
      '^(?!.*\\.(js|css|json|vue)$)': 'jest-preview/transforms/file'
    }
    
  4. In tests/unit/setup.js import any global CSS like so:

    • import '../../public/global.css';
    • import 'bootstrap/dist/bootstrap.min.css';
  5. In tests/unit/setup.js add this:

    • import { jestPreviewConfigure } from 'jest-preview';
    • jestPreviewConfigure({ autoPreview: true });
  6. In tests, change:

    • from: import { shallowMount } from '@vue/test-utils';
    • to: import { render } from '@testing-library/vue';
  7. In tests change:

    • from: const wrapper = shallowMount(MyComponent, options);
    • to: const wrapper = render(MyComponent, options);
  8. In tests change:

    • from: const validator = wrapper.vm.$options.props.whatever.validator;
    • to: const validator = MyComponent.props.whatever.validator;
  9. Finally, in package.json add in this npm script:

    • "jest": "concurrently \"jest-preview\" \"wait-on http://localhost:3336 && npm run unit\"",
    • Change the npm run unit part to whatever script you use to run jest
  10. Do npm run jest

Top comments (0)