`onCompleted` does not receive mocked data from MockedProvider

Author: KonradKlimczakCreated Mar 24, 2020Updated Jul 16, 2020

Data from mocked result in MockProvider is not passed to onCompleted callback.

I have component like this:

function Dogs({ onDogSelected }) {
  const [options, setOptions] = useState([]);
  const [fetch, { loading, error }] = useLazyQuery(GET_DOGS, {
    onCompleted: (data) => {
      setOptions(data.dogs);
    }
  });

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  useEffect(() => {
    fetch();
  }

  return (
    <select name="dog" onChange={onDogSelected}>
      {options.map(dog => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

When I create a test and wrap it with MockProvider which has mocked query for this component, in onCompleted callback I receive undefined instead of data. If I use it in default way using returned data from useLazyQuery it works just fine.

Source: apollographql/react-apollo

View original on GitHub View discussion on GitHub