How to test non-export function in Reactjs

Question

I have watched many tutorial videos on testing, but usually those tests test passed props to component or uses data-testid="". Is there a way to test non-exported functions? I read about rewire module which does this but problem with that is that Jest will not consider functions called from rewire in coverage reports.

// Random.js
import React from 'react'

export function sayHi() {
  return '👋';
}

function ListBox() {

  function saySecret() {
    return '🤫';
  }
    
  return (
    <div>ListBox</div>
  )
}

export default ListBox

First one which has export would be :

 // Random.test.js
 import { sayHi } from './Random.js';

 describe('sayHi', () => {
   it('returns wave emoji', () => {
     expect(sayHi()).toBe('👋');
   });
 });

How should I test saySecret?

Testing those functions makes no sense. Don't just blindly follow code coverage. Test functionality. Those aren't used, so there is no functionality to test — Liam
– Liam, Commented May 25, 2022 at 12:54
yes 'Function1 ' and 'Function2' are not used here at the moment, i wrote it as example of non exported functions inside component — walee
– walee, Commented May 25, 2022 at 12:55
We cannot help with code we cannot see. The current example doesn't help here. Please make sure the code is a minimal reproducible example — evolutionxbox
– evolutionxbox, Commented May 25, 2022 at 12:56
"usually those tests test passed props to component or uses data-testid=""" - to put it another way, those tests exercise the component through its public API. That's what you're supposed to do, otherwise you couple your tests to implementation details rather than behaviour. — jonrsharpe
– jonrsharpe, Commented May 25, 2022 at 13:57

Ben Clayton · Accepted Answer · 2022-05-25 12:59:57Z

3

The short answer is you can't test those functions in isolation to the ListBox component itself.

The better answer is that you shouldn't. At least the react-testing-library philosophy is:

you want your tests to avoid including implementation details of your components

https://testing-library.com/docs/react-testing-library/intro/

.. and functions that exist only inside a component would very much count as implementation details.

If you need to increase your code coverage, then use react-testing-library to 'use' the component in such a way that the functions are called.

If the functions are reusable bits of code, then move them outside the component, and export them. Then you can test them in the usual way.

answered May 25, 2022 at 12:59

Ben Clayton

82.4k26 gold badges123 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

walee Over a year ago

what do you think about this solution:wisdomgeek.com/development/web-development/javascript/…

Ben Clayton Over a year ago

scanned that doc. It says: > Note: We should generally not separately test private functions. They are a part of the implementation detail. If a private function behaves incorrectly, then the publicly exposed functions which make use of it would misbehave as well.

Ben Clayton Over a year ago

so I'd say don't test private functions. test the public bits

evolutionxbox Over a year ago

@walee If they're not used, no. If they are, test the output which uses them

Ben Clayton Over a year ago

If you absolutely need 100% coverage for whatever reason, you'll need to design Jest tests that make the component call the functions, then they'll have coverage

|

Collectives™ on Stack Overflow

How to test non-export function in Reactjs

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related