首页 文章

用jest反应测试，酶beahve strangel

提问于
浏览 次
2

我正在设置用Jest和酶测试React组件的单元测试 . 一些我的设置如何奇怪地工作 . 当被测试的组件在测试文件中时，一切都按原样工作，但是当它被导入时，它不会 .

wrapper.debug（）只输出作为mount（）的输入，而不是返回组件应该呈现的JSX .

My Component under test (TestComponent.js)

import React from 'react';

export default class TestComponent extends React.Component {
  render() {
    return (
      <div>Hello</div>
    )
  }
}

My spec file

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 />

f我在测试文件中包含TestComponent一切正常 .

Myspec file with TestComponet within file:

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：console print：

<TestComponent>
        <div>
            Hello
        </div>
    </TestComponent>
reactjs unit-testing jestjs enzyme

1 回答

  • 1

    什么是输出：

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

    ？

    它必须与在同一文件中声明的第二位相同：

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

    如果它未定义或不相等，请检查您真正导入的是什么 . 可能与文件名或语法有些混淆 .

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

    回复于

相关问题