Методы тестирования, представленные в контексте реакции - PullRequest
Новая
       40

Методы тестирования, представленные в контексте реакции

1 голос
/ 22 марта 2020

У меня есть контекст реакции, подобный этому

UserContext. js

export const UserContext = createContext({
    createUser: async () => {
      ...execute some xhr requests and manipulateData
    },
    getUser: () => {},
  });

  const UserProvider ({ children }) => {
    const context = {
      createUser,
      getUser,
    };

    return (
      <UserContext.Provider value={context}>{children}</UserContext.Provider>
    );
}

И следующий модульный тест

UserContext.spe c. js

import { render } from '@testing-library/react';
import UserProvider, { UserContext } from '@my-contexts/user';
...

let createUser = () => {};
render(
  <UserProvider>
    <UserContext.Consumer>
      {value => {
        createUser = value.createUser;
        return null;
      }}
    </UserContext.Consumer>
  </UserProvider>
);

await createUser(data);

expect(data).toEqual({ status: 200 });

Я не уверен, если этот способ 

let createUser = () => {};
render(
  <UserProvider>
    <UserContext.Consumer>
      {value => {
        createUser = value.createUser;
        return null;
      }}
    </UserContext.Consumer>
  </UserProvider>
);

это лучший метод для "извлечения" внутренних методов экспонируется в UserContext (в данном случае createUser метод)

В моем коде приложения я использую этот контекст следующим образом: 

import { useContext } from 'react';
import { UserContext } from '@my-contexts/user';

const someComponent = (props) => {
   ...
   const { createUser } = useContext(UserContext); 
   const handleCreate = (e) => {
     createUser(form);
   };
   return (
     <form>
         <label>Username</label>
         <input value={form.userName} /> 
         <button type="submit" onClick={handleCreate}> create user </button>
     </form>
   )
};

Но проблема в том, что я могу получить открытые методы из контекста, только если у меня есть компонент и я получаю метод, используя useContext hook.

Если я хочу протестировать метод createUser изолированно:

Существует лучший способ получить методы, показанные в контексте, без рендеринга поставщика и потребителя и «извлечения вручную» его?

...