Testování funkce Zpětného volání funkce, která se spustí, forButton Onclick pomocí žertu

Question 1

Mám Reagovat dítě složka, která má tlačítko

export function Banner({argumentSetter}){
function handleOnClick(){
  argumentSetter(argument.READ);
}
return(
<div>
  <Button onClick={handleOnClick}>
    <Icon name="delete" type="filled">
      Discard
    </Icon>
  </Button>
</div>
)
}

A mám argumentSetter v mé rodičovské komponenty definovány jako následující,

const [argument,setArgument] = useState<Argument>(argument.EDIT);
argumentSetter = useCallBack((val)=>{
setArgument(val);
},[argument]);

return(
  <div>
    <Banner argumentSetter={argumentSetter}/>
  </div>
)

Jak se dostat 100% pokrytí testů pomocí žertu.

Question 2

Otestovat banner, váš kód by měl být následující

import React from "react";
import { mount } from "enzyme";
import { Banner } from "./Banner.js";
import { argument } from "./arguments.js";

it("Button click leads to argument.READ", async () => {
  let promiseResolve = null;
  const argPromise = new Promise((resolve) => {
    promiseResolve = resolve;
  });
  const argumentSetter = (arg) => promiseResolve(arg);
  const banner = mount(<Banner argumentSetter={argumentSetter} />);
  banner.find("button").simulate("click");
  const newArg = await argPromise;
  expect(newArg).toEqual(argument.READ);
});

Vysvětlení:

Jsme vytvořit externě fulfillable slib proměnné, tzv. argPromise který bude řešit, když promiseResolve se nazývá, který je volána, když argumentSetter se nazývá. Proto, když na tlačítko, klepněte na tlačítko je simulované, to bude řešit aktualizovaný argument newArg proměnná (která by měla být argument.READ), a proto můžete vyzkoušet, zda to odpovídá vašim očekáváním.

To by měl tedy zahrnovat všechny řádky váš Banner složky během testování.

Harkunwar · Answer 1 · 2021-11-22T23:18:32

Otestovat banner, váš kód by měl být následující

import React from "react";
import { mount } from "enzyme";
import { Banner } from "./Banner.js";
import { argument } from "./arguments.js";

it("Button click leads to argument.READ", async () => {
  let promiseResolve = null;
  const argPromise = new Promise((resolve) => {
    promiseResolve = resolve;
  });
  const argumentSetter = (arg) => promiseResolve(arg);
  const banner = mount(<Banner argumentSetter={argumentSetter} />);
  banner.find("button").simulate("click");
  const newArg = await argPromise;
  expect(newArg).toEqual(argument.READ);
});

Vysvětlení:

Jsme vytvořit externě fulfillable slib proměnné, tzv. argPromise který bude řešit, když promiseResolve se nazývá, který je volána, když argumentSetter se nazývá. Proto, když na tlačítko, klepněte na tlačítko je simulované, to bude řešit aktualizovaný argument newArg proměnná (která by měla být argument.READ), a proto můžete vyzkoušet, zda to odpovídá vašim očekáváním.

To by měl tedy zahrnovat všechny řádky váš Banner složky během testování.

Testování funkce Zpětného volání funkce, která se spustí, forButton Onclick pomocí žertu

Otázka

Nejlepší odpověď

Vysvětlení:

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii