如何测试一个组件是否由玩笑和酶渲染?

Question

我正在努力学习如何反应。我有一个父组件，它从应用组件中获取道具，并根据道具渲染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.

Answer 1

您不应该检查您的子组件是否被呈现，而是检查实际呈现的内容(测试库鼓励您这样做)

要在react-testing-library中测试它，你可以这样做:

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