Debugging Vue Jest tests in a browser

Using Jest-Preview with Vue-CLI.

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:

   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