Question

我在通过酶测试时遇到了麻烦。当组件安装时，我进行API调用以获取一些数据然后更新状态。我想声明子组件正确地呈现数据。

我已尝试setTimeout并在组件上调用update并且没有为我做任何事情。我可以打印出更新的状态，但我的断言没有反映出来。

这是我的测试：

describe('' () => {
  beforeEach(() => {
    let mock = new MockAdapter(axios);                                                    
    let eventModel = [                                                                    
      { 
        id: 1, 
        title: 'LFD',                                                               
        description: '',
        start_date: new Date(),                                                           
        end_date: new Date()                                                              
      }                                                                                  
    ]
    mock.onGet('/events').reply(200, eventModel);                                         
  });              

  test('renders events', () => {
    let component = shallow(<ForecastPage />);   

    component.update();           

    expect(component.find(EventRow).length).toEqual(1);                                    
  })
})

我的反应成分

class ForecastPage extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      events: []
    };
  }

  componentDidMount() {
    api.getEvents()
      .then((data) => {
        this.setState({
          events: data
        })
      })
      .catch((error) => {
        console.log(error);
      })
  }

  render () {
    return (
      <div>
        <div>
          <h1>Data Forecast</h1>

        <div>
          <table>
            <tr>
              <th>Start Date</th>
              <th>End Date</th>
              <th>Title</th>
            </tr>
          </table>
          {
            this.state.events.map((index, event) => {
              return <EventRow key={index} event={event}/>;
            })
          }
        </div>
      </div>
    );
  }
}

即使我调用更新，也没有任何反应。如果我在渲染功能中打印出控制台状态，我可以看到状态已经更新，但是我的测试没有以某种方式捕获。 setTimeout抛出误报并通过测试无论如何。

我如何自信地测试这个？

Answer 1

<强>更新

首先，检查EventRow的渲染。据我所知，在map函数中，callback首先接收数组元素，然后是 - element的索引。所以你的代码应该看起来像这样。

{
  this.state.events.map((event, index) => {  // here is the difference
    return <EventRow key={index} event={event}/>;
  })
}

如果这样做无效，请尝试使用raw mock，而不使用其他模拟模块。

// import your api module used in ForecastPage component
import api from '/path/to/your/api/module';

describe('' () => {
  beforeEach(() => {                                     
    let eventModel = [                                                                    
      { 
        id: 1, 
        title: 'LFD',                                                               
        description: '',
        start_date: new Date(),                                                           
        end_date: new Date()                                                              
      }                                                                                  
    ]
    // assuming you use jest
    api.getEvents = jest.fn(() => {
      return Promise.resolve(eventModel);
    });

  });              

  test('renders events', async () => {
    let component = await shallow(<ForecastPage />);   

    component.update();           

    expect(component.find(EventRow).length).toEqual(1);                                    
  })
})

如何对api调用进行单元测试并确定反应和酶的状态变化？

1 个答案: