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.
npm install --save-dev @testing-library/vue concurrently jest-preview wait-on
npm uninstall @vue/test-utils
-
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' }
-
In
tests/unit/setup.js
import any global CSS like so:import '../../public/global.css';
import 'bootstrap/dist/bootstrap.min.css';
-
In
tests/unit/setup.js
add this:import { jestPreviewConfigure } from 'jest-preview';
jestPreviewConfigure({ autoPreview: true });
-
In tests, change:
-
from:
import { shallowMount } from '@vue/test-utils';
-
to:
import { render } from '@testing-library/vue';
-
from:
-
In tests change:
-
from:
const wrapper = shallowMount(MyComponent, options);
-
to:
const wrapper = render(MyComponent, options);
-
from:
-
In tests change:
-
from:
const validator = wrapper.vm.$options.props.whatever.validator;
-
to:
const validator = MyComponent.props.whatever.validator;
-
from:
-
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
Do
npm run jest
Top comments (0)