React tests with jest, enzyme behave strangely

Question

I am setting up unit tests for testing React components with Jest and enzyme. Somehow my setup works strangely. When the component under test is inside the test file everything works as it should, but when it is imported, it doesn't.

The wrapper.debug() just outputs what is given as input to mount() instead of returning the JSX that the component is supposed to render.

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);
});

The test fails with received value 0 and Expected Value: 1 The console.log prints:

console print:

<TestComponent />

If I include the TestComponent inside test file everything works normally.

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);
});

Test passed.

console.log print: console print:

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

oklas · Accepted Answer · 2017-06-11T09:13:47.757

1

What is output of:

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

?

It must be same as in second place where it declared in same file:

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

If it undefined or not equal check what you really import is. Probably some import confusion with file name or syntax.

EDIT: Problem solved by question author by disabling automock value of jest in package.json (in comments).

edited Jun 11 '17 at 09:13

answered Jun 11 '17 at 08:25

oklas

7,935
2
26
42

Thanks @oklas for the reply. Output of console.log(TestComponent); is this: { [Function: TestComponent] _isMockFunction: true, getMockImplementation: [Function], mock: [Getter/Setter], mockClear: [Function], mockReset: [Function], mockReturnValueOnce: [Function], mockReturnValue: [Function], mockImplementationOnce: [Function], mockImplementation: [Function], mockReturnThis: [Function], mockRestore: [Function] } – gbdornala Jun 11 '17 at 08:27
Is it equal in both cases (from import and from local instance)? – oklas Jun 11 '17 at 08:31
Thanks Oklas. Your answer helped me. It worked when I set automock: false in package.json file. – gbdornala Jun 11 '17 at 08:35
I am happy. Welcome to stackoverflow. If you found answer helpful you may vote it by pressing upper triangle. (Not availabale for you yet) And if you receive answer for your question you need to slect most good answer and mark it as answer by [v] button near the answer. – oklas Jun 11 '17 at 08:37
Thanks Oklas. I will do it when it is available. – gbdornala Jun 11 '17 at 08:41

React tests with jest, enzyme behave strangely

1 Answers1