test method with jest and react-testing-library

Question

i can´t get the answer, how cant reach the method inside a functional component iin react using jest and react-testing-library.

I tried with enzyme but i see all is changing to RTL.

import React from "react";

const simpleComponents = (props) => {

    const simpleMethod = () =>{ 
        // method logic
    };

    return <h1>test</h1>;
    };
}

export default simpleComponents;

Answer 1

You should try to test only what your user would see in a real browser, and not your component internal logic. This is what react-testing-library promotes: writing tests that give confidence because they see/do what a real user would.

https://testing-library.com/docs/guiding-principles

Following these guidelines, you should try to build a test which triggers user interactions on visible elements (rendered by your component), and which would involve the execution of simpleMethod.

This is the whole point of react-testing-library queries: getByText, getByPlaceholder, getByRole: things that a real user would see, hiding internal logic. But I guess you could have this approach with Enzyme (I never used Enzyme).

Writing tests with this approach leads to less tests, but stronger ones, which IMHO is a good thing. It is quite different from classical unit tests (say in a Java context for example) where you tests functions, inputs, outputs...

In fact your React component is a function, its inputs are user interactions, its output is a DOM.

Answer 2

simpleMethod function is defined in the private scope of simpleComponents SFC. It's not exposed, so you can't get the function outside of simpleComponents .

But you can test it indirectly, for example:

const simpleMethod = () =>{ 
  console.log('method logic');
};

Firstly, you need to use an event such as click , submit to trigger it. We add a console.log method, so we can spy on the console.log method, to check if simpleMethod function is called or not.