1

我是一名新的 React 和 Javascript 开发人员。我已经为狗示例的反应测试安装了 Chai 和 Enzyme 并创建了所有测试文件。文件结构如下：

my-app/src/App.js
my-app/src/Components/AddDog.js
my-app/src/Components/Dogs.js
my-app/src/Components/DogItem.js

my-app/src/Tests/App.test.js
my-app/src/Tests/AddDog.test.js
my-app/src/Tests/Dogs.test.js

但是，当我点击“npm run test”时，我有 4 次失败，如下所示：

 PASS  src/App.test.js
 PASS  src/tests/Dogs.test.js
 PASS  src/tests/App.test.js
 FAIL  src/tests/AddDog.test.js

● Test suite for App Component › successfully adds dog to list when form submitted

**TypeError: Cannot add property value, object is not extensible**

  22 |
  23 |
> 24 |     adddog.find('#dogName').get(0).value = 'Lola';
     |     ^
  25 |     adddog.find('#imageURL').get(0).value = 'https://static.pexels.com/photos/54386/pexels-photo-54386.jpeg';
  26 |     adddog.find('#dogBreed').get(0).value = 'Beagle';
  27 |

我的 AddDog.test.js 文件如下：

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');


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

       const form = adddog.find('form');
       form.simulate('submit');
       expect(wrapper.find('Dogs')
                     .find('DogItem')).length(2);
       expect(wrapper.state().dogs[1].name == 'Lola');

    });

});

这是下面的 App.js 文件：

 import React, { Component } from 'react';
import Dogs from './components/Dogs';
import AddDog from './components/AddDog';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      dogs: []
    };
  }

  getDogs() {
    var defaultDogs = {dogs: [
      {
        name: 'Princess',
        breed: 'Corgi',
        image: 'https://s-media-cache-ak0.pinimg.com/originals/51/ae/30/51ae30b78696b33a64661fa3ac205b3b.jpg'
      },
      {
        name: 'Riley',
        breed: 'Husky',
        image: 'http://portland.ohsohandy.com/images/uploads/93796/m/nice-and-sweet-siberian-husky-puppies-for-free-adoption.jpg'
      },
    ]};
    this.setState(defaultDogs);
  }

  UNSAFE_componentWillMount() {
    this.getDogs();
  }

  handleAddDog(dog) {
    let dogs = this.state.dogs;
    dogs.push(dog);
    this.setState({dogs:dogs});
  }

  handleDeleteDog(name) {
    let dogs = this.state.dogs;
    let index = dogs.findIndex(x => x.name === name);
    dogs.splice(index, 1);
    this.setState({dogs:dogs});
  }

  render() {
    return (
      <div className="App">
        <Dogs dogs={this.state.dogs} onDelete={this.handleDeleteDog.bind(this)} />
        <AddDog addDog={this.handleAddDog.bind(this)} />
        <hr />
      </div>
    );
  }
}

export default App;

此外，这是 AddDog.js 文件，如下所示：

import React, { Component } from 'react';

class AddDog extends Component {
  constructor() {
    super();
    this.state = {
      newDog:{}
    }
  }

  static defaultProps = {
    categories: ['Web Design', 'Web Development', 'Mobile Development']
  }

  handleSubmit(e) {
    if(this.refs.name.value === '') {
      alert('Title is required');
    } else if (this.refs.image.value === '') {
        alert('Image link is required');
    } else if (this.refs.breed.value === '') {
          alert('Breed is required');
    } else {
      this.setState({newDog:{
        name: this.refs.name.value,
        breed: this.refs.breed.value,
        image: this.refs.image.value
      }}, function() {
        //console.log(this.state);
        this.props.addDog(this.state.newDog);
      });
    }
    e.preventDefault();
  }

  render() {
    return (
      <div>
        <h3 id="addDog">Add Dog</h3>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <div>
            <label>Name</label><br />
            <input id="dogName" type="text" ref="name" />
          </div>
          <div>
            <label>Image</label><br />
            <input id="imageURL" type="text" ref="image" />
          </div>
          <div>
            <label>Breed</label><br />
            <input id="dogBreed" type="text" ref="breed" />
          </div>
          <br />
          <input id="submitButton" type="submit" value="Submit" />
          <br />
        </form>
      </div>
    );
  }
}

export default AddDog;

请告诉我如何解决这个错误。有没有办法在测试文件中添加新狗而不会出现此错误？

4

0 回答 0