0

I'm writing some unit tests for React/Redux/Grommet app. For testing I'm using Jest/Enzyme/Chai/Sinon.

I have the following component: 

import React from 'react'
import FormField from 'grommet/components/FormField'
import Box from 'grommet/components/Box'
import Label from 'grommet/components/Label'
import TextInput from 'grommet/components/TextInput'

const CustomTextInput = ({label, value, onChange}) =>
    <FormField label={<Label size='small'>{label}</Label>}>
        <Box pad={{'horizontal': 'medium'}}>
            <TextInput placeholder='Please Enter' value={value}
                onDOMChange={event => onChange(event.target.value)}
            />
        </Box>
    </FormField>

export default CustomTextInput

And the following test fails :

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import { expect } from 'chai'
var sinon = require('sinon');
import CustomTextInput from '../src/customInputs/CustomTextInput'
import TextInput from 'grommet/components/TextInput'
import Box from 'grommet/components/Box'
import FormField from 'grommet/components/FormField'


describe('<CustomTextInput />', () => {
    it('input changes', () => {
        let onChange = sinon.spy();
        const wrapper = shallow(<CustomTextInput label={'test'} value={'test'} onChange={onChange} />)
        wrapper.find(TextInput).simulate('keypress', {which: 'a'})
        expect(onChange.called).to.equal(true)
    })
})

With this error:

AssertionError: expected false to equal true

I've tried to simulate the onChange function a couple of different ways, mainly taking ideas from here and here. i.e. 

wrapper.find(TextInput).value = 'test'
wrapper.find(TextInput).simulate('change', {target: {value: 'test'}})
wrapper.find(TextInput).first().simulate('change', {target: {value: 'test'}})

I'm starting to wonder if the simulate method of enzyme has trouble interacting with higher level library components like the ones from grommet or if it needs to be applied directed to a lower-level <input> tag. Has anyone experienced this sort of thing?

4

1 回答 1

0

索环 TextInput 只是标准输入表单字段的包装器，所以试试这个：

wrapper.find('input').simulate('change', {target: { value: 'a'}});

希望我的回答能对你有所帮助！

于 2017-06-20T10:26:42.367 回答