i can´t get the answer, how cant reach the method inside a functional ponent 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;

i can´t get the answer, how cant reach the method inside a functional ponent 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;

• javascript
• reactjs
• jestjs
• react-testing-library

Share Follow edited Apr 18, 2023 at 7:45 Florian Motteau 3,72411 gold badge2626 silver badges4343 bronze badges asked Apr 19, 2020 at 15:38 SantiagoSantiago 10811 gold badge11 silver badge77 bronze badges 5

• What exactly are you testing? Can you post the full code within simpleMethod? – wentjun Commented Apr 19, 2020 at 15:54
• the problem is i dont know how can reach the method (simpleMethod ) inside the ponent (simpleMethod ) in the test, i need to wrap the method to test and get a posible result for "expect" describe("name", ()=>{it("name test2){ const wrapperFunctionsimpleMethod = ??? }) – Santiago Commented Apr 19, 2020 at 17:26
• 2 Yes I understand. For class ponents, you can spy on the class properties/methods. However, for functional ponents, you can't. Therefore, the only thing you can do is to test for the behaviour, such as DOM changes, or props (for those, you can still spy on them). That's why I am asking for the full code so I know what to test for – wentjun Commented Apr 19, 2020 at 18:17
• ok, i think i understood, only i can reach the method on a class ponents, not in a functional ponent, i needed undertend the theory. thanks you! – Santiago Commented Apr 19, 2020 at 21:43
• I ran into the same problem today. If anyone must do it, you are going to have to create a separate suite and test the function separately, although RTL doesn't condone that. I was embarrassed to learn this from the team's solution architect. – Hari Reddy Commented Apr 15, 2023 at 0:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You should try to test only what your user would see in a real browser, and not your ponent 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./docs/guiding-principles

Following these guidelines, you should try to build a test which triggers user interactions on visible elements (rendered by your ponent), 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 ponent is a function, its inputs are user interactions, its output is a DOM.

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.