1

私は学校のテストのセクションの最後の仕様にいます。

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

何か案は?

4

1 に答える 1