如何使用jest測驗組件內的函式？

我有一個組件 MyCheckbox.js 的單元測驗覆寫率報告。

覆寫范圍

如何測驗 MyCheckbox.js 中的 onCheckmarkPress() 函式？

這是 MyCheckbox.js 的實作：

import * as React from 'react';

import { Pressable, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useState } from 'react';

/**
 *
 * @param {() => void} props.onUpdate called when checkbox is pressed
 * @return {JSX.Element}
 * @constructor
 */
const MyCheckbox = (props) => {
  const [checked, onChange] = useState(false);
  function onCheckmarkPress() {
    onChange((prev) => {
      let checked = !prev;
      props.onUpdate(checked);
      return checked;
    });
  }

  return (
    <Pressable
      style={[styles.checkboxBase, checked && styles.checkboxChecked]}
      onPress={onCheckmarkPress}
    >
      {checked && <Ionicons name="checkmark" size={24} color="black" />}
    </Pressable>
  );
};

const styles = StyleSheet.create({
  checkboxBase: {
    width: 35,
    height: 35,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    borderWidth: 2,
    borderColor: 'white',
    backgroundColor: 'white',
  },

  checkboxChecked: {
    backgroundColor: '#C4C4C4',
  },
});

export default MyCheckbox;

這就是我嘗試測驗用例的方式：

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

it("works", () => {
    const onUpdateMock = jest.fn();
    render(<MyCheckbox onUpdate={onUpdateMock} />);

    expect(onUpdateMock).toHaveBeenCalledTimes(0);
    expect(screen.queryByTestId("checkIcon")).toBeNull();

    const pressable = screen.getByRole("pressable");
    fireEvent.press(pressable);

    expect(onUpdateMock).toHaveBeenCalledTimes(1);
    expect(screen.queryByTestId("checkIcon")).toBeInTheDocument(); // check that the icon is rendered
});

但是，我收到錯誤“無法找到具有可訪問性角色的元素：可按下”。這會覆寫覆寫報告中標記的紅線嗎？

uj5u.com熱心網友回復：

你應該測驗你的組件的行為，所以它看起來像這樣：

1. 渲染組件
2. 查找Pressable組件
3. 確保check不顯示該圖示
4. 模擬組件click上的事件Pressable或它回應的其他事件（觸摸？）
5. 檢查check圖示是否顯示

這種測驗將為您提供測驗的覆寫范圍和功能。如果您需要更詳細的答案，請提供Pressable來源，很難判斷它是按鈕還是其他一些實作。

您可以使用React 測驗庫來完成上述所有步驟。

假設你的MyCheckbox作品是這樣的：

const MyCheckbox = (props) => {
  const [checked, onChange] = React.useState(false);

  const onCheckmarkPress = () => {
    onChange((prev) => {
      let checked = !prev;
      props.onUpdate(checked);
      return checked;
    })
  }

  return (
    <button onClick={onCheckmarkPress}>
      {checked && <IonIcon data-testid="checkIcon" name="checkmark" />}
    </button>
  );
};

你可以像這樣測驗它：

import { fireEvent, render, screen } from "@testing-library/react";
import MyCheckBox from "../MyCheckbox";

it("should work", () => {
  const onUpdateMock = jest.fn();
  render(<MyCheckBox onUpdate={onUpdateMock} />);
  expect(screen.queryByTestId("checkIcon")).not.toBeInTheDocument(); // check that the icon is not rendered
  const btn = screen.getByRole("button"); // get the button (pressable)
  fireEvent.click(btn); // click it

  expect(screen.getByTestId("checkIcon")).toBeInTheDocument(); // check that the icon is displayed
  expect(onUpdateMock).toHaveBeenCalledTimes(1); // make sure that the onUpdate function that was passed via props was clicked
});

標籤：javascript反应式单元测试开玩笑的

上一篇：在VSCode中為部分代碼庫使用不同的makefile進行除錯（斷點/等）

下一篇：在路由中模擬索引函式內的物件