無法從開玩笑的反應組件中觸發回呼函式

我正在嘗試為我用 React 制作的一個簡單的天氣網路應用程式撰寫一些開玩笑的測驗。當我運行我的測驗時，它會創建組件的快照，看起來還不錯，但是當我嘗試觸發點擊事件時，我得到一個型別錯誤：

TypeError: tree.props.handleClick is not a function

我使用 jest docs 撰寫了這個測驗，我認為這就是你觸發點擊事件的方式。我沒有正確參考點擊功能嗎？我是撰寫測驗的新手，所以歡迎任何關于用玩笑為 React 撰寫測驗的資訊！

反應代碼

import React from "react"
import { useEffect, useState } from 'react'
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const CityEntry = ({ weatherDatum, deleteLocation }) => {
  const capitalizeFirstLetter = (string) => {
    return string.charAt(0).toUpperCase()   string.slice(1);
  }

  const handleClick= () => {
    deleteLocation(weatherDatum.id)
  }

  return (
    <div className="city">
      <p className="location flex-item">{capitalizeFirstLetter(weatherDatum.location)} </p>
      <p className="temp flex-item">{weatherDatum.temperature}  &#x2109;</p>
      <p className="feels-like flex-item">Feels like: {weatherDatum.feelsLike}</p>
      <p className="description flex-item">{capitalizeFirstLetter(weatherDatum.description)}</p>
      <p><img className="icon flex-item" src={`https://openweathermap.org/img/w/${weatherDatum.icon}.png`}></img></p>
      <button className="delete" onClick={handleClick}>Delete</button>
    </div>
  )
}

export default CityEntry;

笑話測驗代碼

import renderer from 'react-test-renderer';
import CityEntry from '../src/Components/CityEntry.js'

it('deletes a city entry when clicked', () => {
  const component = renderer.create(
    <CityEntry weatherDatum={{ id: '', lat: '', lon: '', location: '', temperature: '', feelsLike: '', description: '', icon: '' }} />
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot()

  renderer.act(() => {
    tree.props.handleClick()
  });

  tree = component.toJSON();
  expect(tree).toMatchSnapshot()
})

創建的開玩笑快照

exports[`deletes a city entry when clicked 1`] = `
<div
  className="city"
>
  <p
    className="location flex-item"
  >
     
  </p>
  <p
    className="temp flex-item"
  >
      ℉
  </p>
  <p
    className="feels-like flex-item"
  >
    Feels like: 
  </p>
  <p
    className="description flex-item"
  />
  <p>
    <img
      className="icon flex-item"
      src="https://openweathermap.org/img/w/.png"
    />
  </p>
  <button
    className="delete"
    onClick={[Function]}
  >
    Delete
  </button>
</div>
`;

uj5u.com熱心網友回復：

組件的 JSON 表示僅用于斷言。您不能使用它來操縱組件的狀態。JSON 不能包含函式，它只是靜態資料。

要模擬按鈕單擊，您需要改用TestInstance上可用的方法。

最好也觸發按鈕上的實際單擊處理程式，以便deleteLocation呼叫另一個函式。

import renderer from 'react-test-renderer';
import CityEntry from '../src/Components/CityEntry.js'

it('deletes a city entry when clicked', () => {
  const component = renderer.create(
    <CityEntry weatherDatum={{ id: '', lat: '', lon: '', location: '', temperature: '', feelsLike: '', description: '', icon: '' }} />
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot()

  renderer.act(() => {
    component.root.findByType('button').props.onClick();
  });

  tree = component.toJSON();
  expect(tree).toMatchSnapshot()
})

順便說一句，您可能會考慮使用React 測驗庫。API的react-test-renderer級別非常低，大多數人覺得這更符合人體工程學。我看到的大多數最近創建的 React 測驗套件都走這條路。

從哲學上講，它也阻止了你即將做的事情，即抓住道具并直接操縱它們。這是因為好的測驗只會像真實用戶那樣與元素互動。

標籤：反应开玩笑的

上一篇：當我嘗試使用反引號并映射到我的物件陣列時，ReactJS呈現[objectObject]

下一篇：后續請求產生SyntaxError:"[objectObject]"isnotvalidJSONReactQuery