繁体   English   中英

用Jest部分模拟React模块

Partially mock React module with Jest

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我试图在导入的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 strict";

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

  const React = require('react');

  const lazy = jest.fn();
  return (0, _objectSpread2.default)({}, React, {
    lazy
  });
});

var _interopRequireWildcard3 = require("...\\node_modules\\@babel\\runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("...\\node_modules\\@babel\\runtime/helpers/interopRequireDefault");

var _interopRequireWildcard2 = _interopRequireDefault(require("...\\node_modules\\@babel\\runtime/helpers/interopRequireWildcard"));

var _objectSpread2 = _interopRequireDefault(require("...\\node_modules\\@babel\\runtime/helpers/objectSpread"));

var React = _interopRequireWildcard3(require("react"));

const React2 = require('react');
...

这可能与create-react-app Jest + Babel设置有关,因为我无法使jest.dontMock无法与jest.dontMock Jest jest.dontMock正常工作并require

为什么React2静态的React导入但不React2 里面到底发生了什么?

如何固定jest.dontMock当前行为以在顶层部分模拟模块?

1 个回复

默认导入:

一个简单的解决方案是在React.lazy中模拟setupTest.js

import React from 'react';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

jest.spyOn(React.lazy);

对于每个测试文件,将部分模拟任何随后的react require/imports

工作示例https : //github.com/mattcarlotta/react-lazy-mocked (我不使用create-react-app ,但是可以按照我的设置方法来设置jest

安装:

  • git clone git@github.com:mattcarlotta/react-lazy-mocked.git
  • cd react-lazy-mocked
  • yarn install
  • yarn test

root / __ tests __ / root.test.js

import React from 'react';
import App from '../index.js';

const React2 = require('react');

describe('App', () => {
  const wrapper = mount(<App />);

  it('renders without errors', () => {
    const homeComponent = wrapper.find('.app');
    expect(homeComponent).toHaveLength(1);
  });

  it('should partially mock React module', async () => {
    expect(jest.isMockFunction(await require('react').lazy)).toBe(true); // eslint-disable-line global-require
    expect(jest.isMockFunction(React)).toBe(false);
    expect(jest.isMockFunction(React.lazy)).toBe(true);
    expect(jest.isMockFunction(React2)).toBe(false);
    expect(jest.isMockFunction(React2.lazy)).toBe(true);
  });

  it('should no longer be partially mocked within the test file', () => {
    React.lazy.mockRestore();
    expect(jest.isMockFunction(React.lazy)).toBe(false);
  });
});

pages / Home / __ tests __ / Home.test.js

import React from 'react';
import Home from '../index.js';

describe('Home', () => {
  const wrapper = shallow(<Home />);

  it('renders without errors', () => {
    const homeComponent = wrapper.find('.app');
    expect(homeComponent).toHaveLength(1);
  });

  it('should partially mock React module', async () => {
    expect(jest.isMockFunction(React.lazy)).toBe(true);
  });
});

命名进口:

工作示例https : //github.com/mattcarlotta/named-react-lazy-mocked

安装:

  • git clone git@github.com:mattcarlotta/named-react-lazy-mocked.git
  • cd named-react-lazy-mocked
  • yarn install
  • yarn test

utils / __ mocks __ / react.js

jest.mock('react', () => ({
  ...require.requireActual('react'),
  lazy: jest.fn(),
}));
module.exports = require.requireMock('react');

utils / setup / setupTest.js (可选,您可以将模拟react文件添加为global jest函数,这样就不必为每个测试都将import * as React from 'react'编写为import * as React from 'react' ):

import { JSDOM } from 'jsdom';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// import React from '../__mocks__/react';

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

// global.React = React;

root / __ tests __ / root.test.js

import * as React from 'react';
import App from '../index.js';

const React2 = require('react');

describe('App', () => {
  const wrapper = mount(<App />);

  it('renders without errors', () => {
    const homeComponent = wrapper.find('.app');
    expect(homeComponent).toHaveLength(1);
  });

  it('should partially mock React module', async () => {
    expect(jest.isMockFunction(await require('react').lazy)).toBe(true); // eslint-disable-line global-require
    expect(jest.isMockFunction(React)).toBe(false);
    expect(jest.isMockFunction(React.lazy)).toBe(true);
    expect(jest.isMockFunction(React2)).toBe(false);
    expect(jest.isMockFunction(React2.lazy)).toBe(true);
  });
});
1 React和Jest模拟模块

我正在创建一个应用程序,在其中我使用redux和node-fetch进行远程数据获取。 我想测试一个事实,那就是我很好地调用了具有良好参数的fetch函数。 这样,我正在使用jest.mock和jasmine.createSpy方法: 这是我要测试的功能: 如您所见, ...

2 React中的Jest模块模拟

进入功能组件+挂钩和React Unit测试,我正在尝试执行以下操作: 在一个组件中,我使用了实用程序API文件中的函数。 在挂载时,我对我的api进行了异步函数调用。 在该实用程序API文件中,我想以各种方式模拟该函数,因此当我在测试中渲染组件时,它将在挂钩中看到不同的响应。 它将 ...

3 在React应用程序中使用Jest模拟导入/模块

我正在开发一个React应用程序,我想测试一个模块,我们称之为B,这取决于另一个模块,我们称之为A. 该场景可能是这样的: moduleA.js moduleB.js 测试我的组件的核心库是Jest和Enzyme。 我的目标是测试模块B,但我想单独对其进行测试,因此 ...

5 Mocking 一个带有 Jest 的 NodeJS 模块

我花了一整天的时间寻找这个。 我有以下代码。 在我的测试中,我想模拟CarModel或CarService 。 要么对我有用。 我模拟这些的原因是用内存数据库替换真实数据库。 但我找不到任何可行的解决方案。 如果你们中的任何人有任何想法,那么我将不胜感激。 ###编辑### 汽车服务.js ...

6 用Jest模拟模块变量

我一直在使用Jest来模拟一些变量,这些变量用在经过测试的函数中,如下所示: 在这里, SERVER_URL的新设置值由hydrateApp() 。 但是,我不能使用module来做到这一点。 当我尝试设置module.hot时,在调用该函数时它将仍然是未定义的: 在这种情况 ...

7 用Jest模拟节点模块

由于节点模块无法编译,我对我的本机应用程序的开玩笑的测试失败了(react-native-checkout)。 由于模块中的引用无效,因此无法编译。 我想嘲笑它,以便Jest测试通过。 我尝试使用jest.mock('react-native-checkout');进行简单的模拟 , ...

8 Mocking 一个带有 Jest 的配置模块

我正在尝试围绕使用简单的配置 object 添加测试。 假设我有: 配置文件 应用程序.ts 应用程序.test.ts 第二次测试失败,因为在第一次测试中修改了真实配置,但我希望它失败,因为 beforeEach 中的模拟已将值设置为“模拟 foo”。 我认为这与配置导出不是 function 有关 ...

10 开玩笑的 Mocking 模块

我在 App.js 中有一个方法,我想为其编写测试用例。 但是,当我在测试文件中导入 App.js 时,App.js 中的所有导入语句也会被导入并导致错误。 是否可以模拟使用 jest 在我的 App.js 中导入的依赖项。 考虑下面的例子 当我在 App.spec.js 文件中尝试时,是否可以模拟 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM