reactjs - 反应测试库在每个之前都不能使用

Question

我有很多测试用例，我使用pre自定义函数避免每次填写表格test

使用函数pre自定义函数时，测试有效并通过

  beforeEach(() => {
    render(
      <MemoryRouter initialEntries={['/']}>
        <Signup {...props} />
      </MemoryRouter>
    );
  });

      describe('when form is filled', () => {
        const pre = () => {
          user.type(screen.getByLabelText(labelEmailText), '[e-mail]')
          user.click(screen.getByText(buttonText))
        }

        test('should render loading', async () => {
          pre()
          await waitFor(() => {
            expect(screen.getByTestId(LOADING_TEST_ID)).toBeInTheDocument()
          })
        })
       // ... a lot of test cases
      })

它也应该可以使用，beforeEach但测试不起作用

  beforeEach(() => {
    render(
      <MemoryRouter initialEntries={['/']}>
        <Signup {...props} />
      </MemoryRouter>
    );
  });

      describe('when form is filled', () => {
        beforeEach(() => {
          user.type(screen.getByLabelText(labelEmailText), '[e-mail]')
          user.click(screen.getByText(buttonText))
        })
        test('should render loading', async () => {
          await waitFor(() => {
            expect(screen.getByTestId(LOADING_TEST_ID)).toBeInTheDocument()
          })
        })
        // ... a lot of test cases
      })

Unable to find an element by: [data-testid="signup-form-loading-spinner"]

为什么反应测试库适用于自定义函数而不是beforeEach

标签： reactjsunit-testingreact-testing-library

Answer 1

react testing library 与 一起使用beforeEach，我认为这里没有问题beforeEach，我尝试了基本示例，它可以正常工作，您可以screen.debug在test块中记录组件并查看组件是否正确呈现

//App.js
function App() {
  return (
    <div className="App">
      <label htmlFor="username-input">Username</label>
      <input type="text" id="username-input" data-testid="username" />
      <button>Click</button>
    </div>
  );
}
//App.test.js
beforeEach(() => {
    render(<App />);
})

describe('App component',() => {
  beforeEach(() => {
    user.type(screen.getByLabelText('Username'), '[e-mail]')
    user.click(screen.getByText('Click'))
  })

  test('renders correctly', async() => {
      // screen.debug()
      //expect(screen.getByTestId('username')).toBeInTheDocument()
      await waitFor(() => {
         expect(screen.getByTestId('username')).toBeInTheDocument()
      })
  });
})