Question

我正在设置用于使用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:

＆＃13;

<TestComponent />

＆＃13;

如果我在测试文件中包含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 print： 控制台打印：

＆＃13;

    <TestComponent>
        <div>
            Hello
        </div>
    </TestComponent>

＆＃13;

Answer 1

输出是什么：

import TestComponent from '../TestComponent';
console.log(TestComponent);`

必须与在同一档案中声明的第二位相同：

class TestComponent extends React.Component {
  render() {
    ...
  }
}
console.log(TestComponent);`

如果未定义或不相等，请检查您真正导入的内容。可能与文件名或语法有些混淆。

编辑：问题作者通过在package.json中禁用automock jest值来解决问题（在评论中）。

用jest反应测试，酶行为异常

1 个答案: