Jest/React Testing Library for Survey Creator.

Hi,

I am using Survey Creator and I have created many components that have been added to the Action Bar at the top of Survey Creator, such as Save and Close, Find and Replace and many more.

I have been testing these in Jest using the Component Test methodology, however it is necessary to render the entire <SurveyCreator> component; which I do not want.

Is there a way I can isolate the action bar component and/or test my implementation alone, without the need of rendering the entire Survey Creator component?

An example of my testing is done below, you can see I render the entire SurveyCreator with the necessary props and all the mocks and providers are done in a standalone file. For context, a parameter is a placeholder string, so if I add {{palceholder}} and then I update the parameter, the survey will update all the placeholder strings with what I want it to be. The function is tested alone and works fine, however I want to test the Component on the Survey action bar.

I hope that makes sense, would be great to get a clear understanding if I could render the action bar alone or not, something I have seen in the past is <ParentComponent.Child />.

Code
test("Update survey parameter", async () => {
  render(
    <Provider store={store}>
      <Router history={history}>
        <SnackbarProvider>
          <SurveyCreator
            json={surveyDetailsJson}
            surveyId={surveyDetailsJson.uuid}
          />
        </SnackbarProvider>
      </Router>
    </Provider>
  );

  await waitFor(() =>
    expect(screen.queryByText("Parameters (1/3)")).toBeInTheDocument()
  );
  const parameterTabElement = screen.getByText("Parameters (1/3)").closest("span");
  userEvent.click(parameterTabElement);
  await waitFor(() => expect(screen.queryByText(/missing_key/)).toBeInTheDocument());
  userEvent.type(screen.getByLabelText(/missing_key/), 'new value');
  expect(screen.queryByText("Parameters (2/3)")).toBeInTheDocument();
  const designerTabElement = screen.getByText("Designer").closest("span");
  userEvent.click(designerTabElement);
  await waitFor(() =>
    expect(screen.queryByText(surveyDetailsJson.title)).toBeInTheDocument()
  );
});