Reactjs 使用Jest模拟React组件
我试图在所有测试中模拟我的一个组件。原因是它在本地包中使用的是D3旧版本的副本,而此D3引用了“this.document”,在运行Jest测试时出错。这可能是由于以下原因造成的: package.jsonReactjs 使用Jest模拟React组件,reactjs,jestjs,enzyme,Reactjs,Jestjs,Enzyme,我试图在所有测试中模拟我的一个组件。原因是它在本地包中使用的是D3旧版本的副本,而此D3引用了“this.document”,在运行Jest测试时出错。这可能是由于以下原因造成的: package.json "devDependencies": { "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.7.0", "eslint": "5.6.0", "eslint-config-airbnb-base": "1
"devDependencies": {
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"eslint": "5.6.0",
"eslint-config-airbnb-base": "13.1.0",
"react-scripts": "^2.0.4",
"react-test-renderer": "^16.6.3",
"redux-devtools": "^3.4.1",
"redux-devtools-dock-monitor": "^1.1.3",
"redux-devtools-log-monitor": "^1.4.0",
"redux-logger": "^3.0.6"
...
"scripts": {
"test": "react-scripts test --env=jsdom --passWithNoTests"
src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
import jest from 'jest';
import BarChart from './components/d3/BarChart/BarChart';
jest.mock('BarChart');
BarChart.render.mockResolvedValue(null);
然而,当我运行npm测试时,我仍然得到:
TypeError: Cannot read property 'document' of undefined
6 | return d3_arraySlice.call(list);
7 | };
> 8 | var d3_document = this.document;
来自本地D3软件包
我的测试文件:
import React from 'react';
import { shallow, mount } from 'enzyme';
import App from '../App';
it('renders without crashing - deep', () => {
mount(<App />);
});
从“React”导入React;
从“酶”导入{shall,mount};
从“../App”导入应用程序;
它('在不崩溃的情况下渲染-深',()=>{
mount();
});
应用程序有一个使用条形图的组件。Issue
从“./components/d3/BarChart/BarChart”导入条形图代码>最后运行的代码中包含对导致错误的此.document
的引用
解决方案
无需导入组件即可对其进行模拟
将a作为第二个参数提供给jest.mock
:
从“酶”导入{configure};
从'enzyme-Adapter-react-16'导入适配器;
配置({adapter:newadapter()});
jest.mock('./components/d3/BarChart/BarChart',/*在此处提供模块工厂函数*/);
或者创建一个at/components/d3/BarChart/\uuuuuu mocks\uuuuu/BarChart
,然后简单地调用jest.mock
,其中包含组件的路径:
从“酶”导入{configure};
从'enzyme-Adapter-react-16'导入适配器;
配置({adapter:newadapter()});
笑话模拟(“./components/d3/BarChart/BarChart”);
当我使用mocks文件夹选项时,它找不到新模块。我在某个地方读到过关于嵌套模块存在问题的文章。对于第一种选择,这对我也不起作用。我提出了一个新问题: