开玩笑的多步表单测试 - 是否可以将测试拆分为多个测试但使用一个渲染？

Question

I have a multi-step Sign Up form in my React Native application and I'm testing it with jest and RNTL. It works fine, but I just don't like how it looks.

Now it's just one big test function which renders the screen in the beginning and then goes through the registration process. It would be nice to render the screen once and then test each step in an individual test function while keeping the progress, but I can't find the proper way to do it.

My approach was to set up a describe function in which i call render on the root component of the form, and then test each step individually, like how i would do in plain javascript:

describe('Registration process', () => {
  // initial screen render:
  const view = render(renderWithProviders(<RegisterNewUser />));

  // first step testing:
  test('Name Step', async () => {
    // trying to access the rendered view:
    const nameTitle = view.getByText('register.name.title');
    expect(nameTitle).toBeOnTheScreen();
    const nameInput = await view.findByPlaceholderText(
      'register.name.fieldPlaceholder',
    );
    await act(async () => {
      await fireEvent.changeText(nameInput, 'George');
    });
    fireEvent.press(view.getByTestId(nextStepTestId));
    expect(nameTitle).not.toBeOnTheScreen();
  });
  // ...tests for next steps
});

But as soon as jest reaches the first line in my first test, I get this error:

Unable to find node on an unmounted component.

      111 |   const view = render(renderWithProviders(<RegisterNewUser />));
      112 |   test('Name Step', async () => {
    > 113 |     const nameTitle = view.getByText('register.name.title');</sub>

Answer 1

It's better if you render the component in each test() so you can adjust props and another context for each test or you can render your component in beforeEach if you want the same props and configuration.

I usually adopt the following way in the test file.

describe('Registration process', ()=> {
     const componentBuilder = (route) => (
          <Providers>
            <TestScreen route={route} />
          </Providers>
      );
    
test('Name Step', async () => {
    const wrapper = render(componentBuilder());
    ...rest of code.
    });
});