- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我试图在导入的 React 模块中仅模拟一个函数,保持模块的其余部分未被模拟,并在所有测试的顶层执行此操作。
我正在使用带有单个测试的新 create-react-app 项目来观察问题。
重现步骤:
create-react-app 测试
src/App.test.js
作为唯一的测试文件npm 运行测试
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
与 vanilla Jest 和 require
一起工作不正确。
为什么 static React
import 被 mocked 但 React2
和其他的不是?里面到底发生了什么?
如何修复 jest.dontMock
当前行为以在顶层部分模拟模块?
最佳答案
一个简单的解决方案是在 setupTest.js
中模拟 React.lazy
:
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 安装
yarn 测试
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 安装
yarn 测试
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 { 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);
});
});
关于javascript - 使用 Jest 部分模拟 React 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55327095/
我正在为我的 react 项目编写单元测试用例,并使用 Jest 和 enzyme 来编写测试用例。我已阅读 Jest 文档 https://jestjs.io/docs/en/jest-object
运行测试时出现以下错误: 无法从“jest-expect.js”中找到模块“jest-matchers” at Resolver.resolveModule (node_modules/jest-
如何使用 jest.run() 或 jest.runCLI() 以编程方式运行所有测试?我应该用什么作为论据? 我试图找到有关它们的文档但失败了。 如果上述函数不起作用,如果我想以编程方式运行 jes
用 Jest 和 enzyme 测试 react 和 typescript ,我如何模拟这个 ExpectsVideo 函数,以便我可以根据我的测试用例场景定义它是否返回 true 或 false j
用 Jest 和 enzyme 测试 react 和 typescript ,我如何模拟这个 ExpectsVideo 函数,以便我可以根据我的测试用例场景定义它是否返回 true 或 false j
我正在使用以下 jest.unittest.json 文件(通过 jest --config 选项使用): { "bail": false, "verbose": true, "trans
我跑npm init npm i -D jest像这样 tutorial 运行推荐 nmp test 后出现此错误 这不是生物.js 或生物.test.js 的错误,因为没有发生此文件错误。我怎样才能
我有一个 Mongoose 模型: var mongoose = require("mongoose"); var transactionSchema = mongoose.Schema({ ca
我在我的角度项目中进行了 Jest 测试。 我有一个 package.json 文件指定了我想用来运行测试的 jest 版本。该文件包括: "@types/jest": "^24.0.18", "je
我正在尝试使用 jest 编写单元测试用例,并且需要模拟以下模式。我收到 TypeError: is not a constructor。 用例:我的用例如下所述 我的组件.js : import
所以我正在使用 jest测试我的 node.js 应用程序,测试完成得很好,但我从 jest 收到一条关于打开句柄的消息。任何见解? jest --detectOpenHandles 通过 src/l
我正在使用 Babel Jest 来转换我的代码以进行测试。 我不知道如何使用相对于项目根目录的路径。 例如,如果我在一个测试文件中导入一个模块:/imports/ui/myModule Jest 抛
我正在致力于更新 Express 微服务的测试。对于某些目录(即我们的 /utils 文件夹),我编写了大量测试,显示覆盖率达到 80-90%。在/routes目录下,有0个测试,但显示100%。 总
我收到以下错误: import React from 'react'; ^^^^^^ SyntaxError: Unexpected token import 原因是一些模块/s在npm中发布时没有编
我正在创建一个 Jest 测试来测试是否记录了用于 superFetch 函数错误处理的指标。我的方法是为 retryFetch 创建一个模拟函数并返回一个 Promise 拒绝事件。我希望它能进入
我正在设置一些新的配置来开 Jest ,我忽略了一些文件,比如 *.stories.js,但是当我使用 *.js.snap 或 *.snap,这个 Jest 不太行。 我正在使用 react-scri
PS E:\react\Code\UI> yarn 测试 yarn 运行 v1.17.3$开 Jest 失败 src/App.test.js ● 测试套件运行失败 Jest encountered a
我是开 Jest 测试的新手,我写了下面的测试。我 Jest mock 了一个函数并将其作为参数传递。但是当运行测试时,在日志中我可以看到函数 onSuccess 被调用。但 expect 失败并出现
我是测试新手。我正在使用 JEST 来测试我的 nodejs API。当我在一个文件中编写所有测试时,它可以正常运行,没有任何错误,但是当我分离它时,它给我的端口已经在使用中。至于每个文件,它运行不同
我正在编写一个 Jest 模拟,但是在模拟本身之外定义一个模拟函数时我似乎遇到了问题。 我有一个类: myClass.js class MyClass { constructor(name) {
我是一名优秀的程序员,十分优秀!