Best approach to verify props pass through

[Whoaa512]

I have a component which should pass props through to it's child. What's the best way to verify this?

import React, { PureComponent } from 'react'
import classnames from 'classnames'

import styles from './styles.css'

export default class Box extends PureComponent {
    render() {
        const {
            children,
            className,
            direction,
            element: Elem = 'div',
            ...props
        } = this.props
        const _className = classnames([
            className,
            direction && styles[direction],
        ])

        return (
            <Elem className={_className} {...props}>
                {children}
            </Elem>
        )
    }
}

My current solution is to pass a data- prop but feels like there should be a better way.

import _ from 'lodash'
import React from 'react'
import { render } from 'react-testing-library'

import Box from '../index'

test('pass through props', () => {
    const { container } = render(
        <Box data-my-custom-prop="my-custom-prop">
            <div>foo</div>
        </Box>,
    )

    expect(container.firstChild.dataset).toMatchSnapshot()
})

[kentcdodds]

Hi @Whoaa512,

That seems like a fine way IMO. Though I probably wouldn't use toMatchSnapshot. Also, I'd recommend not concerning yourself with testing at this level necessarily. Rather than testing the box component, just test something else that uses this feature of the box component and if that works, then you can assume the box component works.

Either way, your current test isn't all that bad :) I just wouldn't recommend the snapshot 👍

I'm going to go ahead and close this as it's not actionable for the library :)

[MatejBransky]

Hi, I have only one similar question: how should I test that my input sets the correct initial value (empty string) for an passed undefined value?

Thanks in advance and thanks for your great lib! 👍

[kentcdodds]

I'd probably render the component then assert that the input has an empty string for its value.

[MatejBransky]

Sorry I mean how can you prevent (with a test) from the accidental forgetted initial value for the input if this input gets undefined value. Because if another contributor rewrites my component with an input and he forgot to assign an empty string to the value then he doesn't see any failure in tests and he happily pulls a request without knowing it.

[kentcdodds]

I'm sorry, I'm not sure I follow the problem. Could you please reproduce what you're talking about in a codesandbox?

[MatejBransky]

Sorry for my late response. (I am on a vacation now.)
If you don't specify an initial value with a string (e.g. initial value of foo was undefined state.foo = undefined => called onChange => state.foo = 'a') of an input then React warns you:

Input is changing a uncontrolled input of type text to be controlled. 
Input elements should not switch from uncontrolled to controlled (or vice versa). 
Decide between using a controlled or uncontrolled input element for the lifetime of the component. 
More info: https://fb.me/react-controlled-components

So I thought that it would be cool if you provide some test which prevents this case. What would you do?

[kentcdodds]

If you can show me a specific example of such a component I'll try to help you out.

[FauzanKhan]

@kentcdodds Following up on this, how would you recommend, we verify props that are not primitive types - objects, functions?

[kentcdodds]

Hi @FauzanKhan,

The best place for questions like this is on https://spectrum.chat/testing-library/help-react

It's best if you can give a https://codesandbox.io example of what you're trying to do.

[alexkrolick]

jest.spyOn can be a good solution for checking if a dependent function component is called with certain props