我正在尝试使用React测试库为我的简单React应用程序构建一个测试单元。我读了所有的文档，陷入了困境。
API是通过创建React应用程序创建的。其中一个功能是用户可以更改主题。有一个setTheme挂钩，将改变主题"黑暗"one_answers"光明"。
App.js
const App = () => {
const [theme, setTheme] = useState('dark');
return ( <div>
<Header theme={theme} setTheme={setTheme} />
</div>)
};
Header.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Header = props => {
return (
<header data-testid="header">
<h1><span className="highlight">Github Users</span></h1>
{props.theme === "dark" ?
<FontAwesomeIcon data-testid="button" icon="sun" size="2x" color="#dcba31" onClick={ () => props.setTheme('light') }/>
: <FontAwesomeIcon icon="moon" size="2x" color="#1c132d" onClick={ () => props.setTheme('dark') }/>}
</header>
);
}
export default Header;
在页眉组件中，我添加了改变主题颜色的箭头功能。
现在，我正试图编写一个测试头组件的测试。预期结果是，在第一次渲染之后，Header组件将渲染图标"sun"。用户点击后，标题应返回"月亮"图标。
我尝试了一些东西，但并没有像我提到的那样奏效。
Header.test.js
import React from 'react';
import { render, cleanup } from "@testing-library/react"
import '@testing-library/jest-dom/extend-expect';
import { act } from "react-dom/test-utils";
import Header from '../components/Header';
afterEach(cleanup);
describe("Header Component", () => {
it("first render should return a sun icon", () => {
const {getByTestId } = render(<Header />)
expect(getByTestId("header"). // What method uses here? To check if it is icon sun or moon ? )
})
it("after mouse click event should return a moon icon", () => {
const button = document.querySelector("svg"); // it is correct way to add a svg element as a button ?
act( () => {
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
})
expect(getByTestId("header"). // again what to write here to test it after click ?
})
})
我确信还有其他方法可以先检查渲染，然后单击"标头"组件渲染。我认为问题在于存在另一个条件呈现的组件。如果是文本，没有问题，但渲染后有svg元素，具有一些属性，如icon="sun"/icon="moon"。
实时版本的项目
Github回购链接
问题：
- 如何正确测试Header组件
- 如何在测试中传递道具例如，我想在测试中使用setTheme钩子如何做到
有很多方法可以做到这一点，我可以在这里推荐文章https://kentcdodds.com/blog/?q=test让你开始。至于你目前的设置，我会改变一些我觉得有助于编写单元测试的东西：
- 使用
data-testid查找元素，例如"第一次渲染应该返回太阳图标">可以通过expect(getByTestId('svg-sun')).toBeDefined()确认，这是我喜欢的模式 - 构造
it的类似于存根的呈现断言，并且在每个测试中只测试一件事，例如，在第二个it中，您缺少测试的呈现部分
关于传递道具的问题，您可以将其传递为render(<Header theme={theme} setTheme={setThemeStub}/>)，其中const setThemeStub = jest.fn()。这允许您将断言作为expect(setThemeStub).toBeCalledWith(...)