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

Question

我的 React Native 应用程序中有一个多步骤注册表单，我正在使用 jest 和 RNTL 对其进行测试。 它工作正常，但我只是不喜欢它的外观。

现在它只是一个大test function，它在开始时渲染屏幕，然后完成注册过程。 渲染一次屏幕然后在保持进度的情况下在单独test function 中测试每个步骤会很好，但我找不到正确的方法来做到这一点。

我的方法是设置一个describe function，其中我在表单的根组件上调用render ，然后单独test每个步骤，就像我在普通 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
});

但是一旦 jest 在我的第一次测试中到达第一行，我就会收到这个错误：

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

如果你在每个test()中渲染组件会更好，这样你就可以为每个测试调整道具和另一个上下文，或者如果你想要相同的道具和配置，你可以在 beforeEach 中渲染你的组件。

我通常在测试文件中采用以下方式。

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