These are chat archives for airbnb/enzyme

16th
Jun 2017
Vamsi Ampolu
@vamsiampolu
Jun 16 2017 04:48

I have updated my question with some alternative approaches that I tried:

https://stackoverflow.com/questions/44579303/need-to-test-that-a-handler-prop-is-called-by-a-composite-react-component

Can somebody help me figure out what the correct approach for the component is?
Need to test that a handler prop is called by a composite React component
I would like to test that a Select component within my component calls my onChange and onBlur handlers correctly. I am using jest as my testing framework and enzyme for rendering my component for t...

Would mocking my component or mocking the Select component help? How can I mock the Select component for this particular test case.
Alternatively, would spying on the onChange component of the Select help me given that the onChange function passed to the component is already a mock??

Jordan Harband
@ljharb
Jun 16 2017 04:49
@vamsiampolu why are you trying to test react tho?
oh i see
ok, so a) you should only test Select in your Select tests, with shallow
b) all you should test in your MyComponent tests is that it renders a Select with the onChange you expect, using shallow
in other words, your MyComponent tests should not know that a <select> ever gets rendered - only Select's tests should know that.
Vamsi Ampolu
@vamsiampolu
Jun 16 2017 04:51
Select is a component from antd, how can I know if onChange is being passed to Select or not.

@ljharb Should I instead do:

const expected = () => {}
const select = wrapper.find(Select)
const actual = select.prop('onChange')
expect(actual).toEqual(expected)

Would this be a good way of testing that?

instead of trying to check if we have an input or a select DOM Node when we test. I think the question has a mistake, it should mount for the test that looks for the select.
Vamsi Ampolu
@vamsiampolu
Jun 16 2017 05:15

Also, in my component, I have an onBlurMethod method which calls the onBlur prop, how can I test my component in a case like that.

Do I spyOn onBlurMethod method and ensure that it calls onBlur? But how can I trigger the blur on the component when I cannot get to a form component.

class MyComponent extends React.Component {
   onBlurMethod = () => {
       //prepare the data
       this.props.onBlur(data)
  }

   render () {
       const {props, onBlurMethod} = this
      const {onChange} = props
       return (<Select onChange={onChange} onBlur={onBlurMethod} />)
  }
}
Jordan Harband
@ljharb
Jun 16 2017 05:37
@vamsiampolu using shallow rendering, you can tell.
iow, const wrapper = shallow(<MyComponent onChange={onChange} />); const select = wrapper.find(Select); expect(select.props().onChange).toEqual(onChange);
for onBlur, you'd do select.props().onBlur(); expect(onBlurSpy).to.have.been.called() or whatever
in other words, do not test Select itself - that's its job. only test that you're passing the right things to it
and don't test React's wiring up of DOM events either.
Vamsi Ampolu
@vamsiampolu
Jun 16 2017 05:42

@ljharb, ingenious, I would never have thought something as simple as that, you have been a lot of help. i understand not wanting to test React

but where do you set the onBlurSpy. Do you set it on the wrapper like:

const onBlurSpy = jest.spyOn(wrapper.instance(), `onBlurMethod')
Jordan Harband
@ljharb
Jun 16 2017 05:46
oh, no - don't spy on that
pass in your spy as the onBlur prop
Vamsi Ampolu
@vamsiampolu
Jun 16 2017 05:47
So, const onBlur = jest.fn() will do. I jest pass it in.
I will try it
Jordan Harband
@ljharb
Jun 16 2017 05:48
yep!
Vamsi Ampolu
@vamsiampolu
Jun 16 2017 05:51

I just found your previous answer here: airbnb/enzyme#208

I was thinking about it wrong. Thanks again.

Jordan Harband
@ljharb
Jun 16 2017 05:51
np :-)
Vamsi Ampolu
@vamsiampolu
Jun 16 2017 06:37

@ljharb I was fixing my tests to use shallow instead of mount to rely on the techniques discussed above when I found another case which I want to ask you about:

  it('renders with the checked children icon when switched ON if provided', () => {
    const expected = 'check'
    const options = {checkedChildren: expected}
    const wrapper = mount(<Switch value options={options} />)

    const icon = wrapper.find(Icon)
    const actual = icon.prop('glyph')

    expect(actual).toEqual(expected)
  })

Is this a good test or are there other ways of testing that my Icon component passed as a prop to the Switch component recieved the glyph that I said that it would recieve.

Jordan Harband
@ljharb
Jun 16 2017 06:40
this is good
you're asserting that Switch renders an <Icon glyph="check" />
now, you also need Icon tests
Vamsi Ampolu
@vamsiampolu
Jun 16 2017 06:45

@ljharb, thanks, fear not for I have another one that I thought of, it involves the children of a component from the Checkbox component from the antd library.

Test

    it('renders with a label after the input when a label is provided', () => {
    const expected = 'Checkbox'
    const wrapper = shallow(<CheckboxWidget label={expected} />, shallowOptions)
    const checkbox = wrapper.find(AntdCheckbox)
    const labelComp = checkbox.children('span')

    const actual = labelComp.text()
    expect(actual).toEqual(expected)
  })

Component

  return (
    <div className={className}>
      <LabelBefore>
        {showLabel && labelBefore ? `${label}:` : null}
      </LabelBefore>
      <Checkbox
        id={id}
        disabled={disabled}
        checked={value === undefined ? false : value}
        onChange={onChange}
      >
        {showLabel && !labelBefore ? label : null}
      </Checkbox>
    </div>
  )
I want to test that the children of Checkbox has the label prop somewhere within the tree.
Jordan Harband
@ljharb
Jun 16 2017 06:48
ok - so you'd shallow-render CheckboxWidget. then you'd either .find(LabelBefore) and .find(Checkbox) and check that label was present in one or the other - or, you'd use .text() and see if it contains label.
Vamsi Ampolu
@vamsiampolu
Jun 16 2017 06:58
So, in the case of the Checkbox, I tried doing checkbox = wrapper.find(Checkbox) and checkbox.text() which returned <Checkbox />
Jordan Harband
@ljharb
Jun 16 2017 07:02
ahh, well
you don't
that's a test for Checkbox. it should NOT be a test for CheckboxWidget.
all CheckboxWidget's tests should assert is that they render a Checkbox with the right props
which could include "children"
Vamsi Ampolu
@vamsiampolu
Jun 16 2017 07:05
ok, you mean that this test should not be written by me, but it should be included by the library that I am using?
Jordan Harband
@ljharb
Jun 16 2017 07:07
yes
and it's not your job to test the library
Vamsi Ampolu
@vamsiampolu
Jun 16 2017 07:08
@ljharb thanks.