标签: babel-jest

我正在使用Babel Jest转换我的代码以进行测试。我不知道如何使用相对于项目根目录的路径。

例如，如果我在测试文件中导入以下模块：/imports/ui/myModuleJest抛出错误

Cannot find module 
'/Users/me/dev/myProject/Users/me/dev/myProject/imports/ui/myModule' from 'test.jsx'`

但是，如果我导入一个具有相对路径的模块，例如：../../ui/myModule它起作用。

我的.babelrc：

{
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties",
    "babel-root-slash-import"
  ],
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "env": {
    "test": {
      "plugins": [
        "transform-decorators-legacy",
        "transform-class-properties",
        "babel-root-slash-import"
      ],
      "presets": [
        "es2015",
        "react",
        "stage-0"
      ]
    }
  }
}

我的笑话配置是：

  "jest": {
    "roots": ["<rootDir>/imports/tests/jest"]
  },

我正在尝试设置一个带有测试的 React 模块。我正在使用汇总来编译所有内容，效果很好。但我也在尝试引入测试。

我的目录结构：

dist/
  |- index.js
src/
  |- .babelrc
  |- util.js
test/
  |- .babelrc
  |- util.test.js
rollup.config.js

到现在为止还挺好。我有一个.babelrc适用于我的源文件的in src：

{
  "presets": [
    ["es2015", { "modules": false }],
    ["env", { "modules": false }],
    "react"
  ],
  "plugins": ["external-helpers"]
}

和一个单独的 Jest 测试，它没有 Rollup 要求的例外：

{
  "presets": ["es2015", "env", "react"]
}

不幸的是，我在运行测试时遇到错误，抱怨他们在源文件 ( SyntaxError: Unexpected token export) 中遇到的第一个 es6 功能。如果我删除模块异常，则测试通过，但 Rollup 失败。

我如何让 babel 为 Rollup 应用模块异常，但不适用于 Jest？或者我应该以完全不同的方式配置这些吗？

我用jest.fn模拟了两个函数：

let first = jest.fn();
let second = jest.fn();

我如何断言first之前调用过second？

我正在寻找类似于sinon的 .calledBefore断言。

更新 我使用了这种简单的“临时”解决方法

it( 'should run all provided function in order', () => {

  // we are using this as simple solution
  // and asked this question here /sf/ask/3224637531/

  let excutionOrders = [];
  let processingFn1  = jest.fn( () => excutionOrders.push( 1 ) );
  let processingFn2  = jest.fn( () => excutionOrders.push( 2 ) );
  let processingFn3  = jest.fn( () => excutionOrders.push( 3 ) ); …

我有一个使用 webpacker 的 Rails 5 应用程序，其中有一个文件 app/javascript/packs/components/module_one.js，我正在尝试用 Jest 进行测试。此文件包含对 .js.erb 文件的导入，如下所示：

// app/javascript/packs/components/module_one.js

import ModuleTwo from './module_two.js.erb'

// ...

module_two.js.erb 包含以下内容：

// app/javascript/packs/components/module_two.js.erb

import ModuleOne from './module_one'

// ...

在运行 webpack-dev-server 时，一切都按预期工作，但是当我尝试运行 yarn test 时，它抱怨以下错误：

FAIL  app/javascript/test/module_one.test.js
  ? Test suite failed to run

    /path/to/module_two.js.erb:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import ModuleOne from './module_one'
                                                                                             ^^^^^^
    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:306:17)
      at Object.<anonymous> (app/javascript/packs/components/module_one.js:1:745)
      at Object.<anonymous> (app/javascript/test/module_one.test.js:1:124)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.545s
Ran all test suites. …

我真的很困惑，在我们的项目中，当出现错误时，jest 没有显示任何堆栈跟踪。

以下简单的失败测试：

test('XXX', () => {
    expect(true).toBe(false);
});

输出如下：

test('XXX', () => {
    expect(true).toBe(false);
});

这就是一切..没有错误行..没有..

我们在设置中使用了以下内容：

• 笑话
• 反应
• 通天塔
• 酵素
• ...

您可以在此处查看更多详细信息：https : //github.com/sulu/sulu/blob/develop/package.json

有人可以在这里给我一个提示吗？

谢谢！

我React Component Name在运行时收到意外令牌npm test。尝试阅读其他几个类似的问题，但似乎没有一个对我有用。我在下面添加了 babelrc 、 package.json 和我的测试文件内容的内容

<!-- content of .babelrc file -->
{ "presets": ["env"] }

<!-- content of package.son file -->
  "dependencies": {
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1",
    "redux": "^3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-jest": "^23.0.0-alpha.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.3",
    "jest": "^22.4.2",
    "react-test-renderer": "^16.2.0"
  }, …

我正在将我们的业力测试迁移到旧的 Angular 9 应用程序中的 Jest，并且面临一些测试失败的问题，并出现以下类型的异常：

类型错误：类构造函数 SomeComponentClass 无法在没有“new”的情况下调用

我遵循 Jest 设置指南并参考了其他一些独立指南，我的设置如下：

笑话配置.js

module.exports = {
    preset: "jest-preset-angular",
    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
    globals: {
      'ts-jest': {
        tsconfig: '<rootDir>/src/tsconfig.spec.json',
        stringifyContentPathRegex: '\\.(html|svg)$',
      },
    },
    coverageDirectory: 'coverage',
    coverageReporters: ["html", "text-summary", "json-summary", "cobertura"],
    transform: {
        '^.+\\.(ts|js|html)$': 'jest-preset-angular',
    },
    snapshotSerializers: [
      'jest-preset-angular/build/serializers/no-ng-attributes',
      'jest-preset-angular/build/serializers/ng-snapshot',
      'jest-preset-angular/build/serializers/html-comment',
    ],
    testEnvironment: "jsdom",
    transformIgnorePatterns: [
        "node_modules/(?!@o3|@al|ui-metadata)"
    ],
    testPathIgnorePatterns: [
        "<rootDir>/node_modules/",
        "<rootDir>/dist/",
        "<rootDir>/cypress/",
        "<rootDir>/src/test.ts/"
    ],
    reporters: [ "default" ],
    testMatch: [
        "<rootDir>/src/exposures/**/*.spec.ts"
    ]
  };

测试设置.ts

import 'jest-preset-angular/setup-jest';
import '@angular/localize/init';
Object.defineProperty(window, 'CSS', { value: null }); …

我在我的反应项目中设置了以下环境。以下是 package.json 文件：-

 {
  "name": "testing",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "2.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0",
    "jest": "^23.6.0",
    "react-test-renderer": "^16.5.2"
  },
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTest.js",
    "transform": { …

我正在对组件进行一些单元测试。但是，在某些组件中，我有一些运行在mounted钩子上的东西使我的测试失败。我设法模拟了我不需要的方法。但是，我想知道是否有一种解决方法来模拟mounted钩子本身。

@/components/attendeesList.vue

<template>
  <div>
    <span> This is a test </span> 
  </div>
</template>

JS

<script>
methods: {
    testMethod: function() {
        // Whatever is in here I have managed to mock it
    }
},

mounted: {
    this.testMethod();
}
</script>

测试规范.js

import { mount, shallowMount } from '@vue/test-utils'
import test from '@/components/attendeesList.vue'

describe('mocks a method', () => {    
  test('is a Vue instance', () => {
  const wrapper = shallowMount(attendeesList, {
    testMethod:jest.fn(),
  })
  expect(wrapper.isVueInstance()).toBeTruthy()
})

我正在为我的应用程序编写第一个测试，然后安装 Jest。

我的测试非常简单，所以我不认为我得到的错误来自那里。

import React from 'react';
import renderer from 'react-test-renderer';
import FancyInput from './FancyInput';

describe('FancyInput', () => {
  it('should render correctly', () => {
    expect(
      renderer.create(
        <FancyInput />
      )
    ).toMatchSnapshot();
  });
});

运行测试时Support for the experimental syntax 'jsx' isn't currently enabled 也出错

`Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.`

我的 webpack 文件有以下内容：

rules: [ …