LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@tayama468

Building Vue Environment Part.2

Last updated at Posted at 2021-07-07

Error Resolution In Introducing Jest

cf. https://qiita.com/tayama468/items/74bc3013d194a7c59a8d

1st Error

$ yarn test

yarn run v1.22.10
warning package.json: No license field
$ jest
Error: Cannot find module 'babel-core'
Require stack:
- /Users/USERNAME/git/test/node_modules/vue-jest/lib/compilers/babel-compiler.js
- /Users/USERNAME/git/test/node_modules/vue-jest/lib/process.js
- /Users/USERNAME/git/test/node_modules/vue-jest/vue-jest.js
- /Users/USERNAME/git/test/node_modules/jest-util/build/requireOrImportModule.js
- /Users/USERNAME/git/test/node_modules/jest-util/build/index.js
- /Users/USERNAME/git/test/node_modules/@jest/core/build/cli/index.js
- /Users/USERNAME/git/test/node_modules/@jest/core/build/jest.js
- /Users/USERNAME/git/test/node_modules/jest/node_modules/jest-cli/build/cli/index.js
- /Users/USERNAME/git/test/node_modules/jest/node_modules/jest-cli/bin/jest.js
- /Users/USERNAME/git/test/node_modules/jest/bin/jest.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/USERNAME/git/test/node_modules/vue-jest/lib/compilers/babel-compiler.js:1:15)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Resolution

$ yarn add -D babel-core

▼
▼
▼

2nd Error

$ yarn test

yarn run v1.22.10
warning package.json: No license field
$ jest
 FAIL  __tests__/pages/index.spec.js
  ● Test suite failed to run

    Cannot find module 'babel-preset-env'
    Require stack:
    - /Users/USERNAME/git/test/node_modules/@babel/core/lib/config/files/plugins.js
    - /Users/USERNAME/git/test/node_modules/@babel/core/lib/config/files/index.js
    - /Users/USERNAME/git/test/node_modules/@babel/core/lib/index.js
    - /Users/USERNAME/git/test/node_modules/jest-snapshot/build/InlineSnapshots.js
    - /Users/USERNAME/git/test/node_modules/jest-snapshot/build/State.js
    - /Users/USERNAME/git/test/node_modules/jest-snapshot/build/index.js
    - /Users/USERNAME/git/test/node_modules/jest-runtime/build/index.js
    - /Users/USERNAME/git/test/node_modules/@jest/core/build/cli/index.js
    - /Users/USERNAME/git/test/node_modules/@jest/core/build/jest.js
    - /Users/USERNAME/git/test/node_modules/jest-cli/build/cli/index.js
    - /Users/USERNAME/git/test/node_modules/jest-cli/bin/jest.js
    - /Users/USERNAME/git/test/node_modules/jest/bin/jest.js
    - Did you mean "@babel/env"?

      at resolveStandardizedName (node_modules/@babel/core/lib/config/files/plugins.js:111:7)
      at resolvePreset (node_modules/@babel/core/lib/config/files/plugins.js:59:10)
      at loadPreset (node_modules/@babel/core/lib/config/files/plugins.js:78:20)
          at loadPreset.next (<anonymous>)
      at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:187:16)
          at createDescriptor.next (<anonymous>)
      at evaluateSync (node_modules/gensync/index.js:251:28)
      at node_modules/gensync/index.js:31:34

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.448 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Resolution

$ yarn add -D @babel/preset-env

▼

$ vim babel.config.js

module.exports = {
  presets: ['@babel/preset-env'],
  env: {
    test: {
      presets: [['@babel/preset-env', { targets: {node: 'current' } }]]
    }
  }
}

▼
▼
▼

3rd Error

$ yarn test

yarn run v1.22.10
warning package.json: No license field
$ jest
 FAIL  __tests__/pages/index.spec.js
  ● Test suite failed to run

    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 Babel. (While processing preset: "/Users/USERNAME/git/test/node_modules/@babel/preset-env/lib/index.js")

      2 | import Vue from 'vue'
      3 | import Vuetify from 'vuetify'
    > 4 | import Index from '../../pages/index.vue'
        | ^
      5 |
      6 | Vue.use(Vuetify)
      7 |

      at throwVersionError (node_modules/@babel/helper-plugin-utils/lib/index.js:78:11)
      at Object.assertVersion (node_modules/@babel/helper-plugin-utils/lib/index.js:28:5)
      at node_modules/@babel/preset-env/lib/index.js:250:7
      at node_modules/@babel/helper-plugin-utils/lib/index.js:22:12
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:317:46
          at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)
      at compileBabel (node_modules/vue-jest/lib/compilers/babel-compiler.js:23:21)
      at processScript (node_modules/vue-jest/lib/process.js:30:10)
      at Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:42:18)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:612:31)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:758:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:815:19)
      at Object.<anonymous> (__tests__/pages/index.spec.js:4:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.63 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Resolution

$ yarn remove babel-core
$ yarn add --dev babel-core@^7.0.0-bridge.0

▼
▼
▼

4th Error

$ yarn test

yarn run v1.22.10
warning package.json: No license field
$ jest
 FAIL  __tests__/pages/index.spec.js
  sample
    ✕ test (1 ms)

  ● sample › test

    [vue-test-utils]: window is undefined, vue-test-utils needs to be run in a browser environment.
    You can run the tests in node using jsdom
    See https://vue-test-utils.vuejs.org/guides/#browser-environment for more details.

      12 |   beforeEach(() => {
      13 |     vuetify = new Vuetify
    > 14 |     wrapper = mount(Index, {
         |               ^
      15 |       vuetify
      16 |     })
      17 |   })

      at throwError (node_modules/@vue/test-utils/dist/vue-test-utils.js:1700:9)
      at warnIfNoWindow (node_modules/@vue/test-utils/dist/vue-test-utils.js:3074:5)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:14045:3)
      at Object.<anonymous> (__tests__/pages/index.spec.js:14:15)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.58 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Resolution

$ yarn add -D jsdom
$ yarn add -D jsdom-global
$ touch jest.setup.js

▼

$ vim jest.setup.js

// jest.setup.js
require('jsdom-global')()

$ touch jest.config.js

▼

$ vim jest.config.js

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['<rootDir>jest.setup.js']
}

▼
▼
▼

5th Error

$ yarn test

yarn run v1.22.10
warning package.json: No license field
$ jest
 FAIL  __tests__/pages/index.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • 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/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/USERNAME/git/test/pages/index.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<template>
                                                                                      ^

    SyntaxError: Unexpected token '<'

      2 | import Vue from 'vue'
      3 | import Vuetify from 'vuetify'
    > 4 | import Index from '../../pages/index.vue'
        | ^
      5 |
      6 | Vue.use(Vuetify)
      7 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1479:14)
      at Object.<anonymous> (__tests__/pages/index.spec.js:4:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.984 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Resolution

$ vim jest.config.js

▼

// jest.config.js
module.exports = {
  // ...
  transformIgnorePatterns: ['node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  }
}

▼
▼
▼

Result

$ yarn test

yarn run v1.22.10
warning package.json: No license field
$ jest
 PASS  __tests__/pages/index.spec.js
  sample
    ✓ test (177 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.113 s
Ran all test suites.
✨  Done in 1.95s.
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?