javascript - 如何测试 react 组件的数组长度？

Question

仍然对什么以及如何监视 React Components 中的东西感到困惑 我有这个函数，它基本上过滤列表并在我为 team 键入值时返回匹配项:

findMatchesForTeam = (team, venue) => {
  if (team) {
    console.log(team) // THIS GETS THE RIGHT TEAM (e.g. Chelsea) WHEN TESTING
    return this.props.matches.filter(t => t.homeTeam === team.name || t.awayTeam === team.name)
      .map((match) => (
        this.result(match)
      ))
  }
}

还有我的测试:

describe('other functions', () => {
  it('expects the matches array to have been filtered', () => {
    wrapper.instance().findMatchesForTeam('Chelsea');
    expect(matchesStub.length).to.equal(2);
  });
});

所以我在我的组件中调用该方法并搜索“Chelsea”并在变量 matchesStub 中我得到了:

const matchesStub = [
  {awayGoals: 1, awayTeam: "Man City", homeGoals: 1, homeTeam: "Arsenal", month: "February"},
  {awayGoals: 2, awayTeam: "Man City", homeGoals: 3, homeTeam: "Chelsea", month: "February"},
  {awayGoals: 0, awayTeam: "Chelsea", homeGoals: 0, homeTeam: "Man Utd", month: "February"}
];

但是我的测试表明它的长度应该是 3(这是初始长度)并且不会打扰过滤。代码有效，但测试无效。

Answer 1

感谢上面的 Will，这个解决方案奏效了:

expect(wrapper.instance().findMatchesForTeam('Chelsea').length).to.equal(2)

嗯，实际上这并不完全正确。最终的解决方案是:

const teamToFilterBy = {name: 'Chelsea'};
expect(wrapper.instance().findMatchesForTeam(teamToFilterBy).length).to.equal(2);

这是因为我上面的过滤器方法需要一个对象，因为它需要 name 属性。在我的测试中，我只向它传递了一个字符串，因此即使它正确地记录了它，显然一个字符串不能有 .name 属性。

感谢所有帮助我到达那里的人!