如何在反应中从父组件测试子组件

Question

我有一个如下所示的组件文件，我想编写一个单元测试，如果 subComponent 作为 Header
下 App.test.tsx 下的 Header 父组件的 prop 传递，子组件应该显示该测试。我知道我可以通过渲染 Header 组件并将 sub 作为 prop 来编写测试。但是如何通过渲染 App 组件来测试相同的功能呢？

// SubComponentButton.test.tsx
const sub = <button test-id="test-id">Mock Sub Component</button>;

render(<Header subComponent={sub} />
expect(screen.queryByRole('button', {name: /mock sub/i})).toHaveTextContenet('Mock Sub Component');

// App component
export default function App() {
    const subComponent: JSX.Element = useMemo(() => {
        return ( <SubComponentButton />);
    }, []);

     return (
       <div className="App">
       <Header
         subComponent={subComponent}
       />
       </div>
     );
}

Answer 1

首先，您可以创建一个专门用于测试的文件，例如Header.spec.tsx，最好放在一个名为tests 或__tests__ 的文件夹中。之后您可以运行 jest 来测试您的组件，我认为 yarn test 或 npm test 应该可以工作。

这样试试：

describe("Header", () => {
  it("renders the subComponent when provided", () => {
    const sub = <button datatest-id="test-id">Mock Sub Component</button>;
    render(<Header subComponent={sub} />)
    
    expect(screen.getByTestId('test-id')).toBeInTheDocument();
  })
})

通过这种方式，您假设在 dom 中将显示作为 subComponent 传递的组件

要从 App 组件测试它，您可以执行以下操作：

App.tsx

export default function App() {
  const subComponent: JSX.Element = useMemo(() => {
    return ( <SubComponentButton />);
  }, []);

  return (
    <div className="App">
      <Header subComponent={subComponent} />
    </div>
  );
}

SubComponentButton.tsx

export default function SubComponentButton() {
  return (
    <button data-testid="sub-component-button">SubComponent</button>
  );
}

App.spec.tsx

describe("App", () => {
  it("renders the subComponent", () => {
    render(<App />)
    
    // You can test by id (as you can see the SubComponentButton contains a button with a test-id attribute)
    expect(screen.getByTestId('sub-component-button')).toBeInTheDocument();

    // You can test by role
    expect(screen.getByRole('button', { name: "SubComponent" })).toBeInTheDocument();
  })
})