Question

我试图运行一个基本应用程序，我正在调用在节点层运行的api。我在react应用程序的package.json中使用代理，这就是为什么我用相对URL调用fetch的原因。

节点在端口4000中运行，而react在3000中运行。

因此，当我在成功调用api之后，我会将加载状态更改为false，最初是在api调用请求发生时，加载程序将到来，因为DataComponent成功执行后，加载为true。

在响应设置为false以加载DataComponent后，基本初始化加载为false

在这里我看不到DataComponent，如何检查呈现的DataComponent。

// app.js

class App extends Component {
  state = {
    loading: true,
    data: null
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async() => {
    const jsonRes = await fetch("/api/user");
    const data = await jsonRes.json();
    this.setState({
      loading: false,
      data
    })
  }

  render() {
    if (this.state.loading) {
      return ( <
        div className = "laoder-container" > < Loader / > < /div>
      )
    } else {
      return ( <
        DataComponent data = {
          this.state.data
        }
        />
      )
    }
  }
}


//app.test.js
import React from 'react'
import App from './App';
import {
  mount
} from 'enzyme'

describe('app.js', () => {
  it('should render the app component once data is there', () => {
    global.fetch = jest.fn().mockImplementation(() => {
      var p = new Promise((resolve, reject) => {
        resolve({
          ok: true,
          json: function() {
            return {
              userName: 'John',
              surName: 'Doe'
            }
          }
        });
      });

      return p;
    });
  })

  const wrapper = mount( < App / > )
  expect(fetch).toBeCalled();
  wrapper.update();
  console.log(wrapper.debug()) // not showing the Data component

})

Answer 1

问题是提取异步发生。到您致电wrapper.debug()时，该状态已经无法更新，因为fetch响应已放入事件堆栈中。 fetch 被称为，但是它没有返回任何响应。

您可以通过将测试更新为以下内容来查看此内容：

// mock out fetch...
const wrapper = mount(<App />);
expect(fetch).toBeCalled();
setTimeout(() => {
  wrapper.update();
  console.log(wrapper.debug()); // should be showing the Data component now
}, 0);

通过将更新/调试代码放置在事件堆栈的末尾，可以使promise回调被称为之前，以尝试查看呈现的标记。

您可以将setTimeout包装在一个承诺中，以从it回调函数返回，然后将其中的任何expects放在resolve之前（否则它可能永远不会在测试结束之前实际运行expect函数。

// mock out fetch...
const wrapper = mount(<App />);
expect(fetch).toBeCalled();
return new Promise((resolve) => {
  setTimeout(() => {
    wrapper.update();
    console.log(wrapper.debug()); // should be showing the Data component now
    expect(...)
    resolve();
  }, 0);
});

另一种选择是仅在状态包含特定数据时测试数据结果是否符合您的期望：

it("should render the app component once data is there", () => {
  const wrapper = shallow(<App />);
  wrapper.setState({
    loading: false,
    data: {
      userName: "John",
      surName: "Doe"
    }
  });
  console.log(wrapper.debug()); // You'll see the DataComponent
});

检查组件是否在酶中未设置状态的情况下-使用抓取

1 个答案: