酶模拟变化事件不能通过复选框

Question

我正试图在我的一个react组件上编写一个单元测试。但我的复选框在模拟更改事件后不会更改。

我的组件：

const Checkbox = ({ label, onChange, id, isChecked }) => {
return (
<>
<input type="checkbox" 
name="node" 
id={"checkbox-" + id}
onChange={onChange} 
checked={isChecked}
/>
<label className="treeview__level" htmlFor={"checkbox-" + id}>{label}</label>
</>
)

我的测试：

it('check if checkbox checked ', () => {
const   testState = { isChecked: false },
checkboxWrapper = shallow(
<Checkbox   label= ""
id= "0"
onChange={(e) => {
testState[e.target.name] = e.target.value;
}}
isChecked= {testState.isChecked}
/>
),
input = checkboxWrapper.find('input').at(0);
input.simulate('change', { target: { name: 'checked', value: true } });
expect(input.props().checked).toBe(true);
})

Answer 1

它按预期工作。在对组件进行浅层渲染时，即使模拟change事件，isChecked道具的值也是false(testState.isChecked的值(。您刚刚更改了testState属性的值。组件不会重新渲染。这就是input.props().checked为您提供false值的原因。

您可能需要使用.setProps(nextOps[，callback](=>Self来更新组件的props。

例如。index.tsx:

import React from 'react';
export const Checkbox = ({ label, onChange, id, isChecked }) => {
console.log('isChecked:', isChecked);
return (
<>
<input type="checkbox" name="node" id={'checkbox-' + id} onChange={onChange} checked={isChecked} />
<label className="treeview__level" htmlFor={'checkbox-' + id}>
{label}
</label>
</>
);
};

index.test.tsx:

import { Checkbox } from './';
import React from 'react';
import { shallow } from 'enzyme';
describe('60708551', () => {
it('check if checkbox checked ', () => {
const testState = { isChecked: false };
const checkboxWrapper = shallow(
<Checkbox
label=""
id="0"
onChange={(e) => {
testState[e.target.name] = e.target.value;
}}
isChecked={testState.isChecked}
/>,
);
const input = checkboxWrapper.find('input');
input.simulate('change', { target: { name: 'isChecked', value: true } });
expect(testState.isChecked).toBeTruthy();
checkboxWrapper.setProps({ isChecked: testState.isChecked });
expect(checkboxWrapper.find('input').props().checked).toBeTruthy();
});
});

单元测试结果：

PASS  stackoverflow/60708551/index.test.tsx (13.81s)
60708551
✓ check if checkbox checked  (43ms)
console.log stackoverflow/60708551/index.tsx:4
isChecked: false
console.log stackoverflow/60708551/index.tsx:4
isChecked: true
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        15.316s

源代码：https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60708551