This is the last article of jest tutorial, and also a review of what you have learned!

Git address: github.com/foreverhot/…

Apply jEST knowledge in real projects

  1. Jest (Testing Framework)
  • Matcher matchers blog.csdn.net/Jsoning/art…
  • Hook function blog.csdn.net/Jsoning/art…
  • Asynchronous code test blog.csdn.net/Jsoning/art…
  • A mock function blog.csdn.net/Jsoning/art…
  • The timer test blog.csdn.net/Jsoning/art…
  • The snapshot snapshot test blog.csdn.net/Jsoning/art…
  • TDD and BDD, unit test, integration test (simple) blog.csdn.net/Jsoning/art…

The links above are a personal summary of each point, including most of the usage in the JEST framework, as well as the official jEST documentation

  1. Vue Test Utils (Vue. Js official unit Test utility library)
  • If you want to use JEST in vUE, you can use test-utils to test vUE components, DOM, etc
  • The official website link: vue-test-utils.vuejs.org/zh/
  1. vuejs
  • To use JEST in VUE, proficiency with the VUE framework is a must

Use jEST in VUE

Prerequisites You have understood the above three basic knowledge

Here is a demo, to get a sense of what demo can do

The test features covered in this demo are:

  • The DOM test
  • Asynchronous code testing
  • Timer test
  • Vuex test
  • A snapshot of the test
  • Unit testing
  • Integration testing
  • Etc.

Clone the project,npm run testYou can view the project test results

Let’s start analyzing the project demo

  1. Install JEST When initializing a project through vue-CLI, select the unit tests and JEST test framework

  2. The project structure

  • By default, after initializing the project,testsIs a separate folder, if all the test files in one file, when you find a test file is more difficult. Here I add one under each component foldertestsFolders, so that the project structure is easier to use
  • Because you changed the directory of the test file, you need to re-create thejest.config.jsConfigure the search path for jEST check test files.Jestjs. IO/docs/en/con…)
  • Scaffolding is lookup by defaultxx.spec.jsTest file, we left the default configuration when we changed the path

  1. To check your code, run NPM run test. Here you have added –watchAll, which checks automatically after each change

  2. Here we will test and analyze the asynchronous code test and VUEX in the project. Others are easier to understand. When entering the page in Home.vue, we will first request data, put the requested data into VUEX, and finally display it on the page

  • When writing test cases, you don’t actually request data, so you need to simulate data, so__mock__The folder is the simulated data
export default {
  // Get request, where the return value is simulated based on the request path
  get(url) {
    switch (url) {
      case '/ceshi':
        return new Promise(resolve= > {
          resolve({
            data: [Test '1'.'test 2'.'test 3']})})default:
        break; }}}Copy the code
  • inhome.spec.jsThe integration test is written here
// Some code
it('1. Users access the interface and request data. 2. 4. Click the picture to delete the corresponding data ', (done) => {
    // Vuex is used in this component, so store and localVue are passed into the component
      const wrapper = mount(Home, { store, localVue })
      The // Home component created requests data, where $nextTick and done are used to wait for asynchronous code to complete and perform assertions
      wrapper.vm.$nextTick((a)= > {
        let items = wrapper.findAll('[data-test="item"]')
        expect(items.length).toBe(3)

        items.at(0).trigger('click')
        items = wrapper.findAll('[data-test="item"]')
        expect(items.length).toBe(2)
        expect(items.at(0).text()).toBe('test 2')
        done()
      })
  })
Copy the code

Git address: github.com/foreverhot/…

My ability is limited, the article may have incorrect or inappropriate parts, I hope you can point out

Pay attention to the public number, and I learn the front-end necessary skills, front-end automation test JEST