Jak volat useEffect aktualizaci hodnot v Kontextu poskytovatel s reagovat testování knihovny?

Question 1

To, co se snažím, je otestovat, zda složka, která závisí na kontextu, volání useEffect a funkci (smích jest.fn()) je volána z tu.

Zde je zjednodušená verze mého kódu:

MyComponent.tsx

export function MyComponent() {
    const ref = createRef();
    const { date } = useMyContext(); // "date" is a string (e.g. `2021-11-01`) 

    useEffect(() => {
        if (date && ref.current) 
            ref.current.scrollIntoView();
    }, [date, ref]);

    return (
        <div>
            {/* some other elements are here */}
            <AnotherComponent ref={ref} />
        </div>
    );
}

MyComponent.test.tsx

it('should scroll into AnotherComponent when date is updated', () => {
    const mockContextValue = { date: '2021-11-01' };
    window.HTMLElement.prototype.scrollIntoView = jest.fn();

    render(
        <MyContext.Provider value={mockContextValue}>
            <MyComponent />
        </MyContext.Provider>,
    );

    // update the date in MyContext.Provider 

    // then, useEffect should be called

    // then, expect scrollIntoView was called
});

Jsem bezradný, jak se

aktualizovat date hodnota v MyContext po MyComponent je vykreslen pomocí vykreslení funkce @testing-library/react
uvidíme, jestli useEffect bylo voláno po date byl aktualizován

Byl jsem googling pro hodiny a hodiny, ale nenašel jsem žádné řešení. Jakákoliv rada bude vítána.

Question 2

Můžete použít překreslil funkce z RTL, tato funkce může být použita k aktualizaci rekvizity nebo kontextu vykreslení komponenty.

Kromě toho, nemusíte se prosadit useEffect háček být nazýván. Protože když se Závislostí změny, bude to být nazýván znovu, toto je chování, které bylo plně testovány, nemusíme testovat.

Můžeme také nepřímo tvrdí, že useEffect se nazývá tvrzením, zda .scrollIntoView() se nazývá.

E. g.

MyComponent.tsx:

import React from 'react';
import { createRef, useContext, useEffect } from 'react';
import { AnotherComponent } from './AnotherComponent';

export const MyContext = React.createContext({ date: '' });

export function MyComponent() {
  const ref = createRef<HTMLDivElement>();
  const { date } = useContext(MyContext);

  useEffect(() => {
    if (date && ref.current) {
      console.log('date: ', date);
      ref.current.scrollIntoView();
    }
  }, [date, ref]);

  return (
    <div>
      <AnotherComponent ref={ref} />
    </div>
  );
}

AnotherComponent.tsx:

import React from 'react';

export const AnotherComponent = React.forwardRef<HTMLDivElement>((props, ref) => {
  return <div ref={ref}>another</div>;
});

MyComponent.test.tsx:

import { render } from '@testing-library/react';
import React from 'react';
import { MyComponent, MyContext } from './MyComponent';

describe('70068118', () => {
  it('should scroll into AnotherComponent when date is updated', () => {
    const mScrollIntoView = jest.fn();
    window.HTMLElement.prototype.scrollIntoView = mScrollIntoView;

    const { rerender } = render(
      <MyContext.Provider value={{ date: '' }}>
        <MyComponent />
      </MyContext.Provider>
    );
    expect(mScrollIntoView).not.toBeCalled();

    rerender(
      <MyContext.Provider value={{ date: '2021-11-01' }}>
        <MyComponent />
      </MyContext.Provider>
    );
    expect(mScrollIntoView).toBeCalled();
  });
});

výsledek testu:

 PASS  examples/70068118/MyComponent.test.tsx (9.695 s)
  70068118
    ✓ should scroll into AnotherComponent when date is updated (39 ms)

  console.log
    date:  2021-11-01

      at examples/70068118/MyComponent.tsx:13:15

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

slideshowp2 · Answer 1 · 2021-11-23T06:10:11

Můžete použít překreslil funkce z RTL, tato funkce může být použita k aktualizaci rekvizity nebo kontextu vykreslení komponenty.

Kromě toho, nemusíte se prosadit useEffect háček být nazýván. Protože když se Závislostí změny, bude to být nazýván znovu, toto je chování, které bylo plně testovány, nemusíme testovat.

Můžeme také nepřímo tvrdí, že useEffect se nazývá tvrzením, zda .scrollIntoView() se nazývá.

E. g.

MyComponent.tsx:

import React from 'react';
import { createRef, useContext, useEffect } from 'react';
import { AnotherComponent } from './AnotherComponent';

export const MyContext = React.createContext({ date: '' });

export function MyComponent() {
  const ref = createRef<HTMLDivElement>();
  const { date } = useContext(MyContext);

  useEffect(() => {
    if (date && ref.current) {
      console.log('date: ', date);
      ref.current.scrollIntoView();
    }
  }, [date, ref]);

  return (
    <div>
      <AnotherComponent ref={ref} />
    </div>
  );
}

AnotherComponent.tsx:

import React from 'react';

export const AnotherComponent = React.forwardRef<HTMLDivElement>((props, ref) => {
  return <div ref={ref}>another</div>;
});

MyComponent.test.tsx:

import { render } from '@testing-library/react';
import React from 'react';
import { MyComponent, MyContext } from './MyComponent';

describe('70068118', () => {
  it('should scroll into AnotherComponent when date is updated', () => {
    const mScrollIntoView = jest.fn();
    window.HTMLElement.prototype.scrollIntoView = mScrollIntoView;

    const { rerender } = render(
      <MyContext.Provider value={{ date: '' }}>
        <MyComponent />
      </MyContext.Provider>
    );
    expect(mScrollIntoView).not.toBeCalled();

    rerender(
      <MyContext.Provider value={{ date: '2021-11-01' }}>
        <MyComponent />
      </MyContext.Provider>
    );
    expect(mScrollIntoView).toBeCalled();
  });
});

výsledek testu:

 PASS  examples/70068118/MyComponent.test.tsx (9.695 s)
  70068118
    ✓ should scroll into AnotherComponent when date is updated (39 ms)

  console.log
    date:  2021-11-01

      at examples/70068118/MyComponent.tsx:13:15

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

Jak volat useEffect aktualizaci hodnot v Kontextu poskytovatel s reagovat testování knihovny?

Otázka

Nejlepší odpověď

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