React 测试库，组件单元测试

Question

我正在尝试使用 React 测试库为我的简单 React 应用程序构建一个测试单元。 我阅读了所有文档并陷入其中。

API 是通过创建 React 应用程序创建的。 其中一项功能是用户可以更改主题。 有 setTheme 钩子可以改变主题“黑暗”和“光明”。

应用程序.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 组件中，我添加了改变主题颜色的箭头 function。

现在我正在尝试编写一个测试 Header 组件的测试。 预期的结果是在第一次渲染 Header 组件后应该渲染图标“太阳”。 用户点击后 header 将返回图标“月亮”。

我尝试了一些东西，但正如我提到的那样它不起作用。

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 ?
    })
})

我确信还有其他方法可以检查第一次渲染，然后单击 Header 组件渲染。 我认为这个问题是有另一个组件是有条件地呈现的。 如果是文本没有问题，但渲染后有 svg 元素具有一些属性，如 icon="sun" / icon="moon"。

项目的现场版本

Github回购链接

问题：

1. 如何正确测试 Header 组件？
2. 如何在测试中传递道具例如我想在测试中使用那个 setTheme 钩子怎么做？

Answer 1

有很多方法可以做到这一点，我可以在这里推荐文章https://kentcdodds.com/blog/?q=test让你开始。 至于您当前的设置，我会更改一些我认为编写单元测试有用的东西：

• 使用data-testid查找元素，例如“第一次渲染应该返回一个太阳图标”可以通过expect(getByTestId('svg-sun')).toBeDefined()来确认，这是我喜欢的模式
• 构造你的it就像 stubbing-rendering-assertions 并且在每个测试中只测试一件事，例如，在你的第二个it你缺少测试的渲染部分

关于您关于传递道具的问题，您可以将其传递为render(<Header theme={theme} setTheme={setThemeStub}/>) where const setThemeStub = jest.fn() 。 这允许您按照expect(setThemeStub).toBeCalledWith(...)进行断言