Still getting tripped up on what and how to spy on stuff in React Components I've got this function, which basically filters a list and returns the matches when I type in a value for 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)
      ))
  }
}

And my test:

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

So I'm calling the method in my ponent and search for "Chelsea" and in the variable matchesStub I've got:

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"}
];

However my test says it should be length 3 (which is the initial length) and doesn't bother filtering. The code works, but the test doesn't.

Still getting tripped up on what and how to spy on stuff in React Components I've got this function, which basically filters a list and returns the matches when I type in a value for 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)
      ))
  }
}

And my test:

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

So I'm calling the method in my ponent and search for "Chelsea" and in the variable matchesStub I've got:

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"}
];

However my test says it should be length 3 (which is the initial length) and doesn't bother filtering. The code works, but the test doesn't.

• javascript
• reactjs
• testing

• What does this.result(match) do? Also you should keep in mind that filter creates new array. Assertions about original array do not make sense. – Yury Tarabanko Commented Feb 19, 2018 at 14:51
• @YuryTarabanko result just returns a div of 4 spans with the detail of the match in i.e. goals and team names – The Walrus Commented Feb 19, 2018 at 14:52
• Your function returns the filtered array, but you're not checking the return result. – user1228 Commented Feb 19, 2018 at 14:53
• @Will ok sure, but how do you mock and test that in a react ponent? – The Walrus Commented Feb 19, 2018 at 14:55
• expect(wrapper.instance().findMatchesForTeam('Chelsea').length).to.equal(2); I'd suspect would work. – user1228 Commented Feb 19, 2018 at 14:57

1 Answer 1

Thanks to Will above, this solution worked:

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

well, actually that is not entirely true. the final solution was:

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

This was because my filter method above takes an object due to it requiring the name property. In my test I was only passing it a string and so even though it was logging it correctly, clearly a string can't have a .name attribute on it.

thanks to all who helped me get there!