时间戳

首页 > 解决方案 > 如何使用 react-test-library 测试复选框

reactjs - 如何使用 react-test-library 测试复选框

问题描述

我正在使用最新版本的 create-react-app（在 package.json 中，“react”：“^17.0.1”）

我正在尝试使用 react-test-library 来测试一个应用程序，其中检查复选框会增加一个计数器。我已经将问题归结为我可以管理的最完美的形式。我试过keyDown，点击...

文本需要 '2' 并收到 '0' ：

组件文件：

import React, { useEffect, useState  } from "react";

function App3() {
  const [counter, setCounter]= useState(0);
  const handleClickInCheckbox = (ev) => {
  setCounter(2)
  };

  return (
    <div className="App">
      <input type="checkbox" onChange={handleClickInCheckbox} id="chkbx" data-testid="ch1" ></input>
      <h1 data-testid="h1" >{counter}</h1>
    </div>
  );
}

export default App3;

测试文件：

import React from 'react';
import { render, act,  screen, fireEvent,  getByRole} from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import App from '../App3'

describe ('app', () => {
      test('checking boxes should increment counter',
      ()=>  {
             act( 
                   ()=>{
                    render (<App /> );
               const ch1 =   screen.getByTestId('ch1')
               const h1 =   screen.getByTestId('h1')
               ch1.focus();
               fireEvent.keyDown(document.activeElement)
               fireEvent.keyDown(screen.getByTestId('ch1'))
                 expect(h1).toHaveTextContent('2');
                 }
                )
             }
 )
})

我尝试使用 jest-environment-jsdom-sixteen，但这并没有改变 package.json 中的任何内容：

"test": "react-scripts test --env=jest-environment-jsdom-sixteen",

标签： reactjsjestjscreate-react-appreact-testing-libraryjsdom

解决方案

相关事件是 .click，但你也不应该把act整个测试放在一边：

describe ('app', () => {
  test('checking boxes should increment counter', () => {
    render(<App />);
    const ch1 = screen.getByTestId('ch1')
    const h1 = screen.getByTestId('h1')
               
    act(() => {
      fireEvent.click(screen.getByTestId('ch1'))
    })
    
    expect(h1).toHaveTextContent('2')
  })
})

在这种情况下，它实际上根本没有工作act，因为没有发生任何异步，但是当你确实需要act它时，它应该集中在你期望状态改变的点上。

推荐阅读