Question

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

API是由create React应用程序创建的。功能之一是用户可以更改主题。有setTheme钩子，可以更改主题“深色”和“浅色”。

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组件中，我添加了更改主题颜色的箭头功能。

现在，我正在尝试编写将测试标头组件的测试。 预期结果是，在首次渲染后，Header组件应渲染图标“ sun”。用户单击后，标题将返回图标“ moon”。

我尝试了一些方法，但是我无法提及。

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”。

Live version of project

Github Repo Link

问题：

如何正确测试Header组件？
例如如何通过测试中的道具我想在测试中使用setTheme钩子怎么做？

Answer 1

有很多方法可以做到这一点，我可以在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(...)

反应测试库，组件单元测试

1 个答案: