CODEWITHSUNDEEP
reactjsreact-nativereduxjestjs
Riley Bracken
Riley Bracken

Reputation: 6379

Jest Snapshot testing Redux & coverage

When snapshot testing a component I want to only test the component itself, not the actions, state or the connecting function that is in Redux. This is because I have tests for these functions in other places.

This messes up your code coverage because it expects that you test all functions.

For example:

export const EarningsInfo = ({ close }) => ( /* ... */ );

const mapStateToProps = _ => ({});

const mapActionsToProps = dispatch => ({
  close: _ => dispatch(closeModal()),
});

export default connect(mapStateToProps, mapActionsToProps)(EarningsInfo);

Jest is expecting that you test

  1. earningsInfo
  2. mapStateToProps
  3. mapActionsToProps
  4. connect

So if you have a simple test like this:

import { EarningsInfo } from '../components/EarningsInfo';

it('renders correctly', () => {
  const tree = renderer.create(
    <EarningsInfo close={ () => null } />
  ).toJSON();

  expect(tree).toMatchSnapshot();
});

Code coverage reports that you are only testing 25% of the file. I am sure this is working as intended.

My question is two fold

  1. Am I correct in my thinking that mapStateToProps, mapActionsToProps and connect shouldn't need to be tested.
  2. Is there a way to ignore a function name in for coverage purposes?

Upvotes: 2

Views: 1171

Answers (1)

Colin
Colin

Reputation: 2021

  1. connect should not be tested as react-redux's own tests already cover this. If mapStateToProps or mapActionsToProps have any non-standard / complicated / business logic then it may make sense to test them.

  2. Yes, but it can be a bit fragile - http://blog.dmbcllc.com/es2015-code-coverage-and-jest-react-js-unit-testing/

Don't worry about 100% code coverage, focus on what is critical AND can be tested well/easily with unit testing.

Upvotes: 1

Related Questions