私は学校のテストのセクションの最後の仕様にいます。
select には、新しい動物を送信する onChange イベントが必要です
基本的に、変更に対応するために、関数を子に渡すことができないようですhandleSubmit
...これが残りの仕様です。
it('select should have an onChange event that submits the new animal', () => {
expect(animalSelect.props('select').onChange).to.be.function;
// choosing a random animal
let animal = getRandomAnimal();
// simulating a 'change' event with an event described as the second argument given to `simulate`
animalSelect.find('select').simulate('change', { target: { value: animal } });
// the spy sent in should be called with the argument described
expect(setAnimalSpy.calledWith(animal)).to.be.true;
});
これは親コンポーネントですExhibit
:
import React, { Component } from 'react';
import AnimalSelect from './AnimalSelect';
import Cage from './Cage';
export default class Exhibit extends Component {
constructor(props) {
super(props);
this.state = {
selectedAnimal: this.props.selectedAnimal,
};
this.setAnimal = this.setAnimal.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
setAnimal(animal) {
this.setState({ selectedAnimal: animal });
}
handleSubmit(event) {
this.setState({ selectedAnimal: event.target.value });
}
render() {
const { selectedAnimal } = this.state;
return (
<div className="exhibit">
<AnimalSelect handleSubmit={this.handleSubmit} submitAnimal={this.setAnimal} animals={this.props.animals} />
<Cage selectedAnimal={selectedAnimal} />
</div>
);
}
}
これはAnimalSelect
(の子Exhibit
) コンポーネントです:
import React, { Component } from 'react';
// exporting the constructor function (dumb component).
// what is the parameter coming in here?
export default function AnimalSelect(props) {
// prettier-ignore
return (
<form>
<label>Select an Animal: </label>
<select onChange={() => props.handleSubmit}>
{props.animals.map((animal, index) => {
return (
<option key={animal} value={animal}>
{animal}
</option>
);
})}
</select>;
</form>
);
}
残念ながら、これは私が得ている唯一のエラーです。
AssertionError: expected false to be true
何か案は?