Enzyme Chai React测试报Cannot add property value错误如何解决

报错原因 #

你遇到的TypeError: Cannot add property value, object is not extensible报错，核心原因是Enzyme的.get(0)方法返回的是React虚拟DOM元素实例，不是浏览器真实DOM节点，这类虚拟DOM对象默认被设置为不可扩展，无法直接修改value属性。

修复方案 #

推荐使用Enzyme内置的simulate方法模拟用户输入行为，既符合测试逻辑（模拟真实用户操作），也不会触发不可扩展对象报错，同时还要修正原测试代码中其他错误的断言写法、逻辑判断错误。

完整修改后的测试代码 #

import { render, screen } from '@testing-library/react';
import { toBeInTheDocument,toHaveStyle,getByText } from '@testing-library/jest-dom';
import React from 'react';
import { expect } from 'chai';
import Enzyme from 'enzyme';
import { mount, shallow } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
Enzyme.configure({adapter: new Adapter()});

import App from '../App';
import AddDog from '../components/AddDog';

describe("Test suite for App Component", function(){
    it("successfully adds dog to list when form submitted", function(){
       const wrapper = mount(<App/>);
       const adddog = wrapper.find('AddDog');

       // 用simulate模拟输入，代替直接修改value
       adddog.find('#dogName').simulate('change', { target: { value: 'Lola' } });
       adddog.find('#imageURL').simulate('change', { target: { value: 'https://static.pexels.com/photos/54386/pexels-photo-54386.jpeg' } });
       adddog.find('#dogBreed').simulate('change', { target: { value: 'Beagle' } });

       const form = adddog.find('form');
       form.simulate('submit', { preventDefault: () => {} });
       
       // 修正断言写法：原App默认已加载2条狗，新增后共3条
       expect(wrapper.find('Dogs').find('DogItem')).to.have.lengthOf(3);
       // 修正判断相等的断言写法
       expect(wrapper.state().dogs[2].name).to.equal('Lola');
    });
});

可选替代方案 #

如果你坚持要直接给输入框赋值，也可以用.getDOMNode()方法拿到真实DOM节点再修改，写法如下：

adddog.find('#dogName').getDOMNode().value = 'Lola';
adddog.find('#imageURL').getDOMNode().value = 'https://static.pexels.com/photos/54386/pexels-photo-54386.jpeg';
adddog.find('#dogBreed').getDOMNode().value = 'Beagle';

该写法也可以解决不可扩展对象报错，但更推荐用模拟事件的写法，更贴合真实用户操作场景。 #

内容的提问来源于stack exchange，提问作者Ashley Koo