mardi 28 août 2018

TypeError: Cannot read property 'high' of undefined

I'm trying to test some buttons I made in react and I'm getting this error for 6 of my test TypeError: Cannot read property 'high' of undefined. The thing that makes these buttons different from the rest of the buttons I'm testing is that these buttons change state variables when clicked on.

my react code

class ReactPage extends React.Component {
  state = {
    fetching = false,
    getJson = [],
    // many more
  }

  render{
    return(
      {this.state.fetching ? <div className="spinner"><MDSpinner size={100} className="spinner" /></div> :
        Object.keys(this.state.getJson).length !== 0 &&
          <table>
            <tbody>
              <tr>
                <td>
                  {this.state.line ? <Linechart data={this.state.chartData} /> : <Areachart data={this.state.chartData} />}
                </td>
              </tr>
              <tr>
                <td>
                  <button id="Abutton" type="submit" onClick={() => this.setState({A:true,B:false,C:false,D:false})}>show A</button>
                  <button id="Bbutton" type="submit" onClick={() => this.setState({A:false,B:true,C:false,D:false})}>show B</button>
                  <button id="Cbutton" type="submit" onClick={() => this.setState({A:false,B:false,C:true,D:false})}>show C</button>
                  <button id="Dbutton" type="submit" onClick={() => this.setState({A:false,B:false,C:false,D:true})}>show D</button>
                  <button id="switch" type="submit" onClick={() => this.setState({"line":! this.state.line})}>Switch to { this.state.line ? "AreaChart" : "LineChart" }</button>
                </td>
              </tr>
            </tbody>
          </table>
       });
    }
 }

my 2 of the 6 failing test

it('switchLine button set line true', () => {
  const wrapper = mount(<Reactpage />)
  wrapper.setState({getJson:[{A:123},{B:123}], line:false })
  wrapper.find("#switch").simulate('click')
  expect(wrapper.state("line")).toBe(true)
})

it('Abutton button set A true and everything else to false', () => {
  const wrapper = mount(<Reactpage />)
  wrapper.setState({getJson:[{A:123},{B:123}]})
  wrapper.find("#Abutton").simulate('click')
  expect(wrapper.state("A")).toBe(true)
  expect(wrapper.state("B")).toBe(false)
  expect(wrapper.state("C")).toBe(false)
  expect(wrapper.state("D")).toBe(false)
})

My switchLine button test worked before I had to remodel my webpage so I'm not sure whats causing the the test too fail, but I'm sure my test should be correctly written. How do fix this?

Aucun commentaire:

Enregistrer un commentaire