How can i test onCompleted, onError or onSuccess in a component starting with a Query

Question

Hi i'm fairly new to testing and i don't know how to enter the onCompleted callback of a Query. I'm using jest with react-testing-library.

I need to enter the onCompleted callback to check an if statement inside of it.

The component:

...

  return (
    <Query
      query={ALL_STICKS}
      variables={{
        name: inputValue,
        idProcess,
        isExceptional,
        codeClasse: data && data.codeClasse,
        codeSubject: data && data.codeSubject,
        codeCompetence: data && data.codeCompetence
      }}
      notifyOnNetworkStatusChange
      onCompleted={dataVaras => {
        if (
          dataVaras.varas_competentes &&
          dataVaras.varas_competentes.items.length === 1
        ) {
          onChange(dataVaras.varas_competentes.items[0]);
        }
      }}
    >
      {({ data: dataSticks, loading }) => {
        return (

          ...
          
        );
      }}
    </Query>
  );

...

The current test suite:

imports ...

describe('SelectStick Component', () => {
  afterEach(cleanup);

  it('should render component', async () => {
    const component = createComponent();

    await wait(0);

    expect(component).toBeDefined();
  });
});

function createComponent(props = {}) {
  const defaultProps = {
    onChange: jest.fn(),
    value: {},
    idProcess: 'II00000020000',
    ...props
  };

  return render(
    <MockedProvider mocks={[sticks]} addTypename={false}>
      <SelectStick {...defaultProps} />
    </MockedProvider>
  );
}

Answer 1

So, I have figured it out. I was testing the onError callback and the variables I was passing to the mocked component was incomplete, all that I needed to do was pass all the variables that I had defined in the mocked query.

It was a very beginner question, but as I've said, I'm new to testing Graphql queries and mutations.