我正在设置单元测试以使用Jest和酶测试React组件。我的设置以某种方式奇怪地工作。当被测组件位于测试文件中时,一切都应正常进行,但导入时则不能。
在wrapper.debug()
刚刚输出什么是作为输入mount()
而不是返回JSX该组件应该呈现的。
我的待测组件(TestComponent.js)
import React from 'react';
export default class TestComponent extends React.Component {
render() {
return (
<div>Hello</div>
)
}
}
我的规格文件
import React from 'react';
import {mount, shallow} from 'enzyme';
import TestComponent from '../TestComponent';
test('should test my test component', () => {
const wrapper = global.mount(<TestComponent />);
console.log("console print:",wrapper.debug());
expect(wrapper.find('div').length).toEqual(1);
});
测试失败,接收值0和期望值:1 console.log打印:
console print:
<TestComponent />
如果我将TestComponent包含在测试文件中,则一切正常。
文件内包含TestComponet的Myspec文件:
import React from 'react';
import {mount, shallow} from 'enzyme';
export default class TestComponent extends React.Component {
render() {
return (
<div>Hello</div>
)
}
}
test('should test my test component', () => {
const wrapper = global.mount(<TestComponent />);
console.log("console print:",wrapper.debug());
expect(wrapper.find('div').length).toEqual(1);
});
通过测试。
console.log打印:控制台打印:
<TestComponent>
<div>
Hello
</div>
</TestComponent>
什么是输出:
import TestComponent from '../TestComponent';
console.log(TestComponent);`
?
它必须与在同一文件中声明的第二位相同:
class TestComponent extends React.Component {
render() {
...
}
}
console.log(TestComponent);`
如果未定义或不相等,请检查您真正导入的是什么。文件名或语法可能与某些导入混淆。
编辑:问题作者通过禁用automock
package.json中的jest值(在注释中)解决了问题。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句