Tag Archives: jest

[Solved] Install The Latest Version of Jest Error: TypeError: Cannot read property ‘instrument‘ of undefined

Background:

In order to add jest to the existing projects, many pits have been stepped on. The pits are listed as follows, the adopted solutions, new problems and final treatment methods.

First of all, my project is vue2, and the Babel of package.json is @ Babel, so the following problems will occur. The handling method of this version is to use the CLI plug-in to start jest instead of the Babel version; If it is Babel version, the normal NPM install – G jest configuration script is enough, which will be described later; The jest installation of vue3 is simpler and is not covered in this article.

Pit 1: it runs directly in Vue project and reports an error

requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babe

Tried:

npm install --save-dev "babel-core@^7.0.0-bridge.0"

Various @Babel or Babel are also installed

But it didn’t work. It is speculated that the conflict is caused by jest’s own package.

Pit 2: then upgrade jest to the latest version, 27 +. report errors

TypeError: Cannot read property 'instrument' of undefined

What should I do?It seems that we can’t find a good method on the Internet. Then go to GitHub and see the projects that @ Babel + vue2 + jest can run. Here are the minimum installation items.

Solution:

npm install @vue/test-utils -D
npm install @vue/cli-service -D
npm install @vue/cli-plugin-unit-jest -D

Jest.conf.js is placed in the root directory, or in the tests directory, or whatever you want

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverage: false
}

Package.json configuration script and configuration file directory

"scripts": {
   "test:unit": "vue-cli-service test:unit --config ./tests/jest.conf.js",
}

If you report an error:

solution: description of the error information. The paths do not match and the test file cannot be found, so change the directory to tests/unit.

Error reporting:

solution: according to the error reporting information, Vue template compiler and Vue need to be the same version, so install the Vue version corresponding to Vue template compiler. My is NPM install Vue template- [email protected]

So far, the unit test is running, and I’m always excited

supplement:

My project can run without changing the. Babelrc file

My package.json:

Here, for the installation and configuration of the Babel version of jest, first look at the package. JSON

Simply start a project

install jest
Global: NPM install – G jest or local: NPM install – D jest
specify the test script in package.json:

run the script to test.

Finally, for TS, you need to install additional packages and configure additional. If you can’t find it on the Internet, go to GitHub.

Jest Vue $route error [How to Modify]

Jest Vue $route reported an error

When you run jest, you will always report errors in the page that uses $route. When you add the following code to jest, you will report other errors

FALSE:

test('Create groupManage data', async (done) => {
    wrapper.vm.$nextTick(() => {
      })
      done()
    })
  })

Finally, it was found that the correct router
was not added to the jest file:

import VueRouter from 'vue-router'

describe('groupManage', () => {
  const wrapper = mount(groupManage, {
    global: {
      plugins: [ElementPlus, VueRouter, store],  // Remember to add VueRouter
      mocks: {
        $route: {
          params: {
            image_uuid: '3'   // the data you may use in vue page
          }
        }
      }
    }
  })
})

Another: createlocalvue has been cancelled in the new Vue test utils

[Solved] Vue unit test syntax error: unexpected token ‘export‘

Paste error information to facilitate search engines to find similar errors

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    D:\123\vue3-pro\h5-editor\node_modules\[email protected]@lodash-es\lodash.js:10
    export { default as add } from './add.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

Solution

After checking online for a long time, I finally found the only way to solve my problem. If the common methods on the Internet are useless, friends can try

According to the reply to the question, you can configure the following in jest. Config. JS 

"transformIgnorePatterns": [
  "<rootDir>/node_modules/(?!lodash-es)"
]