Sunday, August 7, 2022
HomeWordPress DevelopmentDebugging Vue Jest checks in a browser

Debugging Vue Jest checks in a browser


Utilizing Jest-Preview with Vue-CLI.

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

    rework: css
    
  4. In checks/unit/setup.js import any world CSS like so:

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

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

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

    • from: const wrapper = shallowMount(MyComponent, choices);
    • to: const wrapper = render(myComponent, choices);
  8. In checks change:

    • from: const validator = wrapper.vm.$choices.props.no matter.validator;
    • to: const validator = MyComponent.props.no matter.validator;
  9. Lastly, in bundle.json add on this npm script:

    • "jest": "concurrently "jest-preview" "wait-on http://localhost:3336 && npm run unit"",
    • Change the npm run unit half to no matter script you employ to run jest
  10. Do npm run jest

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments