web-dev-qa-db-ja.com

ReactテストライブラリfireEvent.clickが機能しない

私は基本的にカウンタを変更し、値が変更されたことを示すことを試みています。私はこれを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
    })
})
reactjsjestjsreact-testing-library
2
Taylor Austin
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();
    })
})
0
cieldon

クエリを再実行するために何かを確認する必要があるたびに。 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
})
0
Jake Luby