React 测试库 fireEvent.click 不工作答案

【问题标题】：React testing library fireEvent.click not workingReact 测试库 fireEvent.click 不工作
【发布时间】：2020-02-09 08:36:48
【问题描述】：

我试图基本上只是更改一个计数器并显示该值已更改。我正在使用getByTestId 执行此操作，这可能是问题所在？

这是我的组件：

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
    const [count, setCounter] = useState(0)
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
                div
                <div
                    onClick={() => setCounter(prevCount => prevCount + 1)}
                    data-testid="addCount"
                >
                    +
                </div>
        <div data-testid="count">
          {count}
        </div>
                <div
                    onClick={() => setCounter(prevCount => prevCount - 1)}
                    data-testid="minusCount"
                >
                    -
                </div>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

这是我要运行的测试：


describe('State is managed correctly', () => {
    const { getByTestId } = render(<App />)
    const add = getByTestId(`addCount`)
    const count = getByTestId(`count`)

    it('count starts at 0', () => {
        expect(count).toHaveTextContent("0")
    })


 it('count added, value should be 1', () => {
        fireEvent.click(add)
        expect(count).toHaveTextContent("1") // error count is still 0
    })
})

【问题讨论】：

你不应该在这样的测试中保存状态，你会在脚下开枪。您应该在每次测试运行之前运行cleanup，重新安装组件，并仅以您希望为该测试更改它的方式操作状态。

标签： reactjs jestjs react-testing-library

【解决方案1】：

看起来你不能像我希望的那样在 react-testing-library 中真正“管理”状态。从阅读文档看来，您也不应该这样做。

这是我的解决方案：

import React from 'react'
import { render, fireEvent, cleanup } from '@testing-library/react'

import App from '../src/App'

afterEach(cleanup)

describe('App component loads correctly', () => {
    const { container } = render(<App />)
    const { firstChild } = container
    test('renders correctly', () => {
        expect(container).toHaveTextContent(`Learn React`)
    })

    test('first child should contain class "App"', () => {
        expect(firstChild).toHaveClass(`App`)
    })
})

describe('State is managed correctly', () => {
    it('count starts at 0', () => {
        const { getByTestId } = render(<App />)
        const count = getByTestId(`count`)

        expect(count.innerHTML).toBe("0")
    })


 it('should add 1 to count', () => {
        const { getByTestId } = render(<App />)
        const count = getByTestId(`count`)
        const add = getByTestId(`addCount`)

        fireEvent.click(add)
        expect(count.innerHTML).toBe("1")
    })

    it('should minus 1 from count', () => {
        const { getByTestId } = render(<App />)
        const count = getByTestId(`count`)
        const minus = getByTestId(`minusCount`)

        fireEvent.click(minus)
        expect(count.innerHTML).toBe("-1")
    })
})

【讨论】：

【解决方案2】：

每次您需要验证某些东西时都需要重新运行查询。 const count = getByTestId('count') 将 count 设置为初始值，因此您需要告诉它在触发事件后再次查找计数。

it('count added, value should be 1', () => {
  fireEvent.click(add)
  count = getByTestId('count')
  expect(count).toHaveTextContent("1") // error count is still 0
})

【讨论】：

所以我做了expect(getByTestId('count')).toHaveTextContent("1")，现在得到Unable to find an element by: [data-testid="count"]的错误

【解决方案3】：

describe('State is managed correctly', () => {
const { getByTestId } = render(<App />)
const add = getByTestId(`addCount`)
const count = getByTestId(`count`)
const spy = jest.spyOn(add, 'click');
it('count starts at 0', () => {
    expect(count).toHaveTextContent("0")
})


 it('count added, value should be 1', () => {
        add.click();
        expect(count).toHaveTextContent("1") // error count is still 0
        spy.mockRestore();
    })
})

【讨论】：

你不能使用“fireEvent.click”，因为，你clickFn不是来自props
我试图调用函数 whihc 不是你说的道具，我只做了click 它成功了，谢谢