如何使用@testing-library/react 在 useEffect 之前测试组件?

Val*_*kov 5 reactjs react-testing-library

我只能用 react-test-renderer

import React, { useEffect } from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render } from '@testing-library/react';
import { create } from 'react-test-renderer';

function Counter() {
  const [count, setCount] = React.useState(0);

  useEffect(() => {
    setCount(1);
  }, []);

  return <>{count}</>;
}

describe('react-test-renderer', () => {
  const renderer = create(<Counter />);

  it('renders 0', () => {
    expect(renderer.root.children).toContain('0');
  });

  it('renders 1', () => {
    renderer.update(<Counter />);
    expect(renderer.root.children).toContain('1');
  });
});

describe('@testing-library/react', () => {
  const screen = render(<Counter />);

  it('renders 0', () => {
    expect(screen.container).toHaveTextContent('0'); // Not Working!
  });

  it('renders 1', () => {
    screen.rerender(<Counter />);
    expect(screen.container).toHaveTextContent('1');
  });
});

Run Code Online (Sandbox Code Playgroud)

在代码沙盒上