标签: babel-jest

我正在尝试使用jest(集成测试)在基于反应本机的应用程序中测试apiwrapper.当我在iOs模拟器中运行时,一切运行正常,但它不会正确运行我的开玩笑测试 - 我总是得到:

ReferenceError: XMLHttpRequest is not defined

当我尝试使用我的api包装器运行测试时,例如:

it('Login successful with correct data', () => {
  let api = Api.getInstance();
  return api.login("test", "testpass")
         .then(result => expect(result).toEqual('login_successful'));
});

我试图在这里测试的api类确实使用了fetch api(不是vanilla xhr).我假设它的某些东西与试图嘲笑某些东西有关,但还没有找到让它工作的方法.

提前致谢.

我正在尝试测试ES6函数,该函数在执行时更新dom元素.目前我正在获取空节点列表,因为未加载HTML页面.用JEST纯粹测试这个的方法是什么？

jest.dontMock('../scripts/taskModel');
import Request from '../__mocks__/request';
import Task from '../scripts/taskModel';

describe('taskModel', () => {
    it('Should initialize with no friends items', function() {
        expect(document.querySelectorAll('.panel-block').length).toBe(1); // THIS IS ALWAYS RETURNS EMPTY NODELIST
        var task = new Task();
        task.index();
        expect(document.querySelectorAll('.panel-block').length).toBeGreaterThanOrEqual(6); // THIS IS ALWAYS RETURNS EMPTY NODELIST
    });
});

我已经读过 src/setupTests.js 应该在每次测试之前加载，但我仍然让每个测试失败并出现错误：

“酶内部错误：酶期望配置一个适配器，但没有找到。”

这是我的 src/setupTests.js

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'whatwg-fetch';

Enzyme.configure({ adapter: new Adapter() });

这是我的 package.json：

"devDependencies": {
"babel-core": "^6.26.3",
"babel-jest": "^23.6.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"coveralls": "^3.0.2",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"enzyme-to-json": "^3.3.4",
"jest": "^23.6.0",
"react-test-renderer": "^16.5.2",
"redux-mock-store": "^1.5.3",
"regenerator-runtime": "^0.12.1",
"whatwg-fetch": "^3.0.0"
}

我正在运行一个“测试”脚本 npm run test

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch",
  "test:updateSnapshots": "jest --updateSnapshot"
}

我使用以下某种形式开始每个测试文件：

import React from 'react';
import { shallow } from 'enzyme'; …

我一直在寻找答案。我怀疑这是一个.babelrc问题，但找不到有效的答案。

该应用程序运行正常，但据我发现，Jest和Rollup确实都依赖.babelrc。另一个可能的罪魁祸首是小叶。在我构建和测试的所有组件中，只有一个包含Leaflet的组件vue2-leaflet似乎有此问题。考虑到我正在开发地图绘制应用程序，这对我来说至关重要。

我在这里发帖，因为我什么都不能证明。还有许多其他人也遇到过类似的问题。

终端输出：

nr test:unit

> cxl-vue-leaflet@3.0.1-SNAPSHOT test:unit /Users/dan.mahoney/Projects/cxl-vue-leaflet
> NODE_ENV=testing BABEL_DISABLE_CACHE=1 jest --verbose --no-cache

Determining test suites to run...

# Starting...
# 1 test suites found.

#  FAIL  src/components/__test__/specs/cxl-vue-leaflet.spec.js

#
#   /Users/dan.mahoney/Projects/cxl-vue-leaflet/node_modules/vuetify/lib/index.js:1
#
#   ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Vuetify from './components/Vuetify';
#                                                                                                   ^^^^^^^
#
#   SyntaxError: Unexpected identifier
#
#   Stack:
#
#       at new Script (vm.js:85:7)

1..0

# Test Suites:  0%            , 1 failed, 1 total
# Tests:       0 total
# Time:        2.088s

# …

我试图在导入的 React 模块中只模拟一个函数，保持模块的其余部分不被模拟，并在所有测试的顶层执行此操作。

我正在使用带有单个测试的新 create-react-app 项目来观察问题。

重现步骤：

• create-react-app test
• 使用src/App.test.js作为唯一的测试文件提供
• npm run test

App.test.js

jest.mock('react', () => {
  jest.dontMock('react');

  const React = require('react');
  const lazy = jest.fn();

  return {
    ...React,
    lazy
  };
});

import * as React from 'react';
const React2 = require('react');

it('should partially mock React module', async () => {
  expect(jest.isMockFunction(React.lazy)).toBe(true); // passes
  expect(jest.isMockFunction(React2.lazy)).toBe(true); // fails
  expect(jest.isMockFunction(require('react').lazy)).toBe(true); // fails
  expect(jest.isMockFunction((await import('react')).lazy)).toBe(true); // fails
});

这里的问题似乎是jest.dontMock因为它阻止require和动态import被模拟，但目前尚不清楚为什么可以以import这种方式模拟静态，因为它使用require任何方式。这是转译后的文件：

"use …

我不知道为什么这突然不起作用，但这是我的 jest.config.js：

module.exports = {
  preset: 'react-native',
  verbose: true,
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  setupFiles: ['./jestSetup.js'],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)',
  ],
  moduleNameMapper: {
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  },
};

和我的 jestSetup.js：

import 'react-native-gesture-handler/jestSetup';
import '@testing-library/jest-native/extend-expect';
import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';

beforeAll(() => {
  //@ts-ignore
  global.__reanimatedWorkletInit = jest.fn();
});

jest.mock('react-native-share', () => ({
  default: jest.fn(),
}));

jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);

jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock');

  Reanimated.default.call = () => {};

  Reanimated.useSharedValue = jest.fn;
  Reanimated.useAnimatedStyle = jest.fn;
  return Reanimated;
});

jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper'); …

当我为我的 React 组件编写测试用例时，我得到了

类型错误：无法分配给对象“#”的只读属性“x”

其中，当应用程序运行时，它不会抛出类似的错误

它的代码非常基本

this.props.defaultForm = true;

为什么测试和实际应用程序 RUN 的行为不同？

如果我想编写一个测试用例，有什么办法解决？

我正在为我的 Web 应用程序设置测试，该应用程序使用 Jest 框架与带有 TypeScript 的 Vue 框架配合使用。一切似乎都工作正常，除了@我导入中的符号，例如import { Foo } from '@/bar. 无论是在我的测试文件中还是在源代码中，它都无法理解并返回：

Cannot find module '@/store' from 'src/tests/foo.spec.ts'

这是我的 Jest 配置package.json：

  "jest": {
    "moduleFileExtensions": [
      "js",
      "ts",
      "json",
      "vue"
    ],
    "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.tsx?$": "ts-jest",
      "^.+\\.jsx?$": "babel-jest"
    },
    "testURL": "http://localhost/",
    "collectCoverage": true,
    "collectCoverageFrom": ["**/*.{ts,vue}", "!**/node_modules/**"],
    "coverageReporters": ["html", "text-summary"]
  }

有人知道如何使其正常工作吗？

谢谢

我注意到当我们 jest.fn() 并将实现作为 .fn() 和 jest.fn().mockImplementation() 中的参数传递时，我们得到了相同的行为。如果是这样，选择合适只是一个品味问题吗？

例子：

jest.fn((num1, num2) => num1 + num2)
// same as 
jest.fn().mockImplementation((num1, num2) => num1 + num2)

有人有一些想法吗？

我正在使用 React 测试库和 Jest 编写单元测试，并想检查我的 React 组件是否能够成功导航到下一页。

import { fireEvent, render, screen } from "@testing-library/react";
import React from 'react';
import { Provider } from 'react-redux';
import '@testing-library/jest-dom';
import appStore from '../../src/app/redux/store';
import { MemoryRouter, Route } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router';

const setup = (initialEntries = []) => {
      let inMemHistory = createMemoryHistory({ initialEntries });
      const utils = render(
        <Router history={inMemHistory}>
          <Provider store={appStore}>
            <Component-1 />
          
          </Provider>
        </Router>
      );
 
      const saveButtonElem = …