Jest.js 无法触发“更改”事件-请提供DOM元素

mrzz3bfm 于 2023-04-27 发布在 Jest

关注(0)|答案(1)|浏览(121)

我正在编写一个单元测试用例，使用jest和react测试库，用于React中下拉选项的更改所调用的事件。Component的代码如下：

import React,{useState} from "react";
import "./App.css";

function App() {
  const [value, setValue] = useState("fruit")

  function selectionChange(params) {
    console.log(params)
    setValue(params)
  }
  return (
    <div className="App">
      <div>
        <select data-test-id="Oshop" onChange={(e) => selectionChange(e.target.value)}>
          <option value="fruit">Fruit</option>

          <option value="vegetable">Vegetable</option>

          <option value="meat">Meat</option>
        </select>
      </div>
    </div>
  );
}

export default App;

单元测试代码如下：

import { fireEvent, render, screen } from '@testing-library/react';
import App from './App';


test('testing onchange event for oshop', () => {
  render(<App />);
  const dropdElement = screen.queryByTestId("Oshop")
  fireEvent.change(dropdElement,{target:{value:"meat"}})
  expect(dropdElement.value).toBe("meat")
});

首先，当我使用getTestById时，然后我得到错误为
TestingLibraryElement错误：无法通过以下方式找到元素：[data-testid=“Oshop”]
然后我再次尝试与queryByTestId和我开始得到错误为
无法触发“更改”事件-请提供DOM元素。

jestjs

来源：https://stackoverflow.com/questions/76117012/unable-to-fire-a-change-event-please-provide-a-dom-element

1条答案

按热度按时间

nhaq1z211#

应该是data-testid，不是data-test-id，参见ByTestId
例如：
App.tsx：

import React, { useState } from "react";

function App() {
  const [selectedValue, setSelectedValue] = useState()
  function selectionChange(value) {
    console.log(value)
    setSelectedValue(value);
  }
  return (
    <div className="App">
      <select value={selectedValue} data-testid="Oshop" onChange={(e) => selectionChange(e.target.value)}>
        <option value="fruit">Fruit</option>
        <option value="vegetable">Vegetable</option>
        <option value="meat">Meat</option>
      </select>
    </div>
  );
}

export default App;

App.test.tsx：

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

test('testing onchange event for oshop', (done) => {
  render(<App />);
  const dropdElement = screen.queryByTestId("Oshop");
  expect(dropdElement).toHaveValue(undefined);
  if (!dropdElement) return done('select element not found');
  fireEvent.change(dropdElement, { target: { value: "meat" } });
  expect(screen.getByTestId('Oshop')).toHaveValue('meat');
  done();
});

测试结果：

PASS  stackoverflow/76117012/App.test.tsx (6.713 s)
  ✓ testing onchange event for oshop (36 ms)

  console.log
    meat

      at selectionChange (stackoverflow/76117012/App.tsx:6:13)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 App.tsx  |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        7.013 s

软件包版本：

"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.7",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"jest": "^26.6.3",

赞(0）回复(0）举报 2023-04-27

我来回答

Jest.js 无法触发“更改”事件-请提供DOM元素

1条答案

相关问题

热门标签

最新问答