Question

我正在为React / Redux / Grommet应用编写一些单元测试。用于测试我使用Jest / Enzyme / Chai / Sinon。

我有以下组件：

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

以下测试失败：

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)
    })
})

出现此错误：

AssertionError: expected false to equal true

我试图通过几种不同的方式模拟onChange函数，主要是从here和here中提取想法。即

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

我开始怀疑酶的simulate方法是否与较高级别的库组件（例如来自索环的组件）相互作用有困难，或者是否需要将其应用于较低级别的{{1} }} 标签。有没有人经历过这种事情？

Answer 1

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

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

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

酶只适用于较低水平的成分吗？

1 个答案: