CODEWITHSUNDEEP
reactjsunit-testingjestjsenzyme
gbdornala
gbdornala

Reputation: 23

React tests with jest, enzyme behave strangely

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>

Upvotes: 2

Views: 545

Answers (1)

oklas
oklas

Reputation: 8220

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).

Upvotes: 1

Related Questions