标签: babel-jest

我有一个使用 TypeScript、Jest、Webpack 和 Babel 构建的 React 应用程序（不使用 Create React App）。尝试运行“yarn jest”时，出现以下错误：

我尝试删除所有软件包并重新添加它们。它没有解决这个问题。我看过类似的问题和文档，但仍然误解了一些东西。我什至按照另一个指南从头开始设置这个环境，但我的代码仍然收到这个问题。

依赖包括...

"dependencies": {
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/polyfill": "^7.6.0",
        "babel-jest": "^24.9.0",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-test-renderer": "^16.11.0",
        "source-map-loader": "^0.2.4"
    },
    "devDependencies": {
        "@babel/core": "^7.6.0",
        "@babel/preset-env": "^7.6.0",
        "@babel/preset-react": "^7.0.0",
        "@types/enzyme": "^3.9.2",
        "@types/enzyme-adapter-react-16": "^1.0.5",
        "@types/jest": "^24.0.13",

组件的导入行...

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/pages";
import {
    Footer,
    Header,
    Navigation,
} from "./components/shared";

测试文件....

import * as React from "react"; …

在Jest中有没有办法模拟全局对象,比如navigator,Image*？我已经非常放弃了这一点,并将其留给了一系列可模拟的实用方法.例如:

// Utils.js
export isOnline() {
    return navigator.onLine;
}

测试这个微小的功能很简单,但很苛刻,而且根本不具有确定性.我可以获得75%的方式,但这是我可以做的:

// Utils.test.js
it('knows if it is online', () => {
    const { isOnline } = require('path/to/Utils');

    expect(() => isOnline()).not.toThrow();
    expect(typeof isOnline()).toBe('boolean');
});

另一方面,如果我对这个间接是好的,我现在可以navigator通过这些实用程序访问:

// Foo.js
import { isOnline } from './Utils';

export default class Foo {
    doSomethingOnline() {
        if (!isOnline()) throw new Error('Not online');

        /* More implementation */            
    }
}

......并确定性地测试这样......

// Foo.test.js
it('throws when offline', () => {
    const Utils = require('../services/Utils');
    Utils.isOnline …

SyntaxError: Cannot use import statement outside a module无论我尝试过什么，我都无法摆脱这个错误，这让我非常沮丧。有大佬解决了这个问题吗？我已经阅读了一百万个 stackoverflow 和 github 问题线程。没有明确的解决方案。

这是一个 React、Typescript、Webpack 项目。我正在尝试测试一个模块。但 Jest 不会改变以某种方式模块为普通的 javascript。

我得到的错误是

/Users/me/dev/Project/project/node_modules/variables/src/variables.js:12
    import './main.js';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      17 | 
      18 | */
    > 19 | import { GlobalVars } from 'variables'
         | ^
      20 | 
      21 | export const Vars = new GlobalVars()
      22 | 

我试图解决这个问题（但没有奏效）：

• 使用env设置babel.config：env.test.preset: ['@babel/plugin-transform-modules-commonjs']

• 修改transformJest 配置中的设置'^.+\\.jsx?$': 'babel-jest', '^.+\\.tsx?$': …

如果我使用import/exportES6,那么我的所有测试都会失败并显示错误:

意外的保留字

我将我的测试对象转换为使用旧学校IIFY语法,突然我的测试通过了.或者,采用更简单的测试用例:

   var Validation = require('../src/components/validation/validation');//PASS
   //import * as Validation from '../src/components/validation/validation'//FAIL

同样的错误.显然这里导入/导出存在问题.使用ES5语法重写我的代码只是为了让我的测试框架感到满意是不切实际的.

我有巴贝尔开玩笑.我尝试了github问题的各种建议.不行,到目前为止.

的package.json

 "scripts": {
    "start": "webpack-dev-server",
    "test": "jest"
  },
      "jest": {
        "testPathDirs": [
          "__tests__"
        ],
        "testPathIgnorePatterns": [
          "/node_modules/"
        ],
        "testFileExtensions": ["es6", "js"],
        "moduleFileExtensions": ["js", "json", "es6"]
      },

babelrc

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-decorators-legacy"]
}

有没有解决这个问题？

我正在尝试以开玩笑的方式为我的Web组件项目编写测试.我已经使用了带有es2015预设的babel.我在加载js文件时遇到问题.我已经跟踪了一段代码,其中document对象有一个currentScript对象.但在测试环境中它是null.所以我在想同样的嘲笑.但是jest.fn()并没有真正的帮助.我该如何处理这个问题？

一段代码,其中开玩笑失败.

var currentScriptElement = document._currentScript || document.currentScript;
var importDoc = currentScriptElement.ownerDocument;

我写的测试用例. component.test.js

import * as Component from './sample-component.js';

describe('component test', function() {
  it('check instance', function() {
    console.log(Component);
    expect(Component).toBeDefined();
  });
});

以下是jest抛出的错误

Test suite failed to run

    TypeError: Cannot read property 'ownerDocument' of null

      at src/components/sample-component/sample-component.js:4:39

更新: 根据AndreasKöberle的建议,我添加了一些全球变量,并试图嘲笑如下

__DEV__.document.currentScript = document._currentScript = {
  ownerDocument: ''
};
__DEV__.window = {
  document: __DEV__.document
}
__DEV__.document.registerElement = jest.fn();

import * as Component from './arc-sample-component.js'; …

我正在尝试使用babel,jest和vs代码调试一个简单的项目.当我设置一个断点然后开始调试时,我的断点会跳转并且不再是我开始时的位置.可以在这里看到样本回购 - https://github.com/RyanHirsch/starter-node

我已经更新了我launch.json的内容

{
  "name": "Jest",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
  "stopOnEntry": false,
  "args": ["-i", "${file}"],
  "cwd": "${workspaceRoot}",
  "runtimeExecutable": null,
  "sourceMaps": true,
  "protocol": "inspector"
}

我.babelrc看起来像:

{
  "plugins": ["@babel/plugin-proposal-object-rest-spread"],
  "sourceMaps": "inline",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "6.10"
        }
      }
    ]
  ]
}

我认为源映射选项足以让它工作但我错了.需要更改什么才能将断点保留在原始位置？特别是在尝试调试我的测试时.

====编辑====

在断点位于测试线10和实施线4之前:

当我通过选择我的测试文件开始调试然后在VS Code调试窗格中运行Jest时,我的断点跳转到测试第9行和实现第6行:

在节点9.6.1上运行,具有以下扩展名:

DavidAnson.vscode-markdownlint
EditorConfig.EditorConfig
Orta.vscode-jest
PKief.material-icon-theme
PeterJausovec.vscode-docker
Shan.code-settings-sync
bungcip.better-toml
dbaeumer.vscode-eslint
dracula-theme.theme-dracula
dzannotti.vscode-babel-coloring
eamodio.gitlens
esbenp.prettier-vscode
gerane.Theme-FlatlandMonokai
humao.rest-client
mauve.terraform
mikestead.dotenv
mjmcloug.vscode-elixir
mohsen1.prettify-json
ms-vscode.Theme-MaterialKit
ms-vscode.azure-account
ms-vscode.cpptools
ritwickdey.LiveServer
sbrink.elm …

babel-core 和@ babel/core有什么区别 ？

它们是相同的东西,但不同的版本？如果不是这样,你何时使用另一个,何时使用另一个？

谢谢.

我在尝试运行测试文件时遇到错误（我正在使用反应打字稿）

  \xe2\x97\x8f Test suite failed to run\n\n    Jest encountered an unexpected token\n\n    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.\n\n    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\n\n    By default "node_modules" folder is ignored by transformers.\n\n    Here's what you can do:\n     \xe2\x80\xa2 If …

我正在使用jest来测试我的reactJS组件.在我的reactJS组件中,我需要使用jquery UI,所以我在组件中添加了这个:

var jQuery = require('jquery');
require('jquery-ui/ui/core');
require('jquery-ui/ui/draggable');
require('jquery-ui/ui/resizable');

它工作得很好.但是,现在,我需要使用jest进行测试,但是当我将组件加载到testutils中时,我立即遇到了这个问题,

Test suite failed to run
ReferenceError: jQuery is not defined 

如果你在你的应用程序中使用jQuery,有没有人遇到过这个问题？

谢谢

也许你可以帮帮我？我尝试配置开玩笑使用babel @ 7所以我有:

"jest": "^23.4.1",
"@babel/core": "^7.0.0-beta.54",
"babel-7-jest": "^21.3.3",
"babel-jest": "^20.0.3",

并在package.json中配置jest

"jest": {
    "transform": {
      "^.+\\.js$": "babel-7-jest",
    },

得到了

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string

但是,如果我使用

"jest": {
    "transform": {
      "^.+\\.js$": "babel-jest",
    },

我有

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 …