我基本上只是想改变一个计数器并显示该值已经改变。我正在这样做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
})
})
看起来你不能像我希望的那样真正“管理”反应测试库中的状态。从阅读文档来看,您也不应该这样做。
这是我的解决方案:
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")
})
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)