如何使用 jest 和 enzyme 测试组件是否已被渲染？

Question

我正在尝试学习React中的TDD。我有一个父组件，它从App组件获取props，并根据props渲染child1组件或child2组件。以下是我的React文件：

App.js

import './App.css';
import Parent from './Parent';

function App() {
  return (
    <div className="App">
      <Parent number={"one"} word={"hello"}/>
      {/* can be one or two */}
    </div>
  );
}

export default App;

Parent.js

import React from 'react';
import Child1 from './Child1';
import Child2 from './Child2';

function Parent({number,word}) {
  return (
    <div className="Parent" data-testid="parent-test">
      {number === 'one' &&
        <Child1 />
      }
      {number === 'two' &&
        <Child2/>
      }
    </div>
  );
}

export default Parent;

child1.js

import React from 'react';

function Child1() {
  return (
    <div>
      I am Child1
    </div>
  );
}

export default Child1;

child2.js

import React from 'react';

function Child2() {
  return (
    <div>
      I am Child2
    </div>
  );
}

export default Child2;
`

How can I write a test using Jest and enzyme to check in parent file based on props if child1 is rendered or not.

- Aarsh Oza

Answer 1

你不应该检查你的子组件是否被渲染，而是应该检查实际的渲染内容（这也是测试库鼓励你做的）

在 react-testing-library 中，你可以像这样进行测试：

test("If Child1 is rendered!", () => {
  const { getByText } = render(<Parent number="one" word="hello" />);
  expect(getByText("I am Child1")).toBeInTheDocument();
});

- Ryan Le

---

我明白你的意思，谢谢！干杯 :) - Aarsh Oza