CODEWITHSUNDEEP
reactjsmockingjestjs
Fricken Hamster
Fricken Hamster

Reputation: 569

Jest mocking a functional component

I feel like I'm missing something. I'm trying to mock a functional component and it keeps giving me an error

If I do

TestRenderer.create(
      <FunctionalComponent/>
)

It gives the error

Invariant Violation: FunctionalComponent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

If I change it to a class based component it works.

How can I mock a functional component? thanks!

edit:

I tried mocking this component

const SampleComponent = () => {
  return <View/>
}

And it gives the the error,

But this one

class SampleClassComponent extends Component {
  render() {
    return <View/>
  }
}

Does not

error happens when running 

jests.mock('path/to/component')

Upvotes: 1

Views: 778

Answers (1)

Shamar Yarde
Shamar Yarde

Reputation: 760

You have to return something in your functional component, even if it is null. The functional component is Link.

import React from 'react';
import TestRenderer from 'react-test-renderer';

function Link(props) {
  return null;
}

const testRenderer = TestRenderer.create(
  <Link/>
);

console.log(testRenderer.toJSON());

export default Link;

or

import React from 'react';
import TestRenderer from 'react-test-renderer';

function Link(props) {
  return <a href={props.page}>{props.children}</a>;
}

const testRenderer = TestRenderer.create(
  <Link/>
);

console.log(testRenderer.toJSON());

export default Link;

References:

Upvotes: 1

Related Questions