jeudi 8 mars 2018

react testing function with asynchronous setState call

I have the following function in my React component

changeProject(project) {
    const buildProjectValues = [];
    BambooService.GetBuilds(project).then((res) => {
      res.map(build => {
        buildProjectValues.push({'label':build.searchEntity.planName, 'value':build.searchEntity.id});
      });
      this.setState({buildValues:buildProjectValues})
    })
  }

With an associated test:

it('should set buildValues state property to returned array from API call', () => {
    const wrapper = mount(<RepoForm projectValues={projectOptions} />);
    const instance = wrapper.instance();

    nock('https://myurl.api.com')
      .get('/builds?projectKey=KEY')
      .reply(200, buildMock)

    instance.changeProject('KEY');
    expect(instance.state.buildValues).to.equal(buildMock);
  })

The problem is my test completes, as a failure, before the promise in my code resolves, as well as setState being asynchronous anyway!

I've tried using setImmediate as follows, but the same outcome happens;

it('should set buildValues state property to returned array from API call', () => {
    const wrapper = mount(<RepoForm projectValues={projectOptions} />);
    const instance = wrapper.instance();

    nock('https://myurl.api.com')
      .get('/builds?projectKey=KEY')
      .reply(200, buildMock)

    instance.changeProject('KEY');
    setImmediate(() => {
      expect(instance.state.buildValues).to.equal(buildMock);
    });

  })

Is there some way I could rewrite my code to avoid this? Or is there some other pattern out there I could use for this scenario for testing my async code? Thanks!

Aucun commentaire:

Enregistrer un commentaire