Обновление магазина с мутацией Apollo при тестировании с MockedProvider - PullRequest
Новая
       26

Обновление магазина с мутацией Apollo при тестировании с MockedProvider

0 голосов
/ 18 октября 2018

Я пытаюсь протестировать компонент, который должен обновляться новыми данными после выполнения мутации.Я разместил пример кода ниже.Вы можете найти его на GitHub в качестве запускаемого репозитория. .

К сожалению, я не нашел способа действительно обновить данные хранилища для MockedProvider после мутации.Когда вы запускаете тест, вы видите, что мутация выполняется, и компонент визуализируется после этого.Но так как мутация ничего не делает, новый элемент todo не добавляется.

Может кто-нибудь сказать мне, как изменить данные с мутацией при использовании MockedProvider?

Тестовый запрос и мутация: 

const TODOS_QUERY = gql`
  query todos {
    todos {
      title
    }
  }
`

const ADD_TODO_MUTATION = gql`
  mutation addTodo($title: String!) {
    addTodo(title: $title)
  }
`;

Тестовый компонент: 

const Component = () => (
  <Query query={TODOS_QUERY}>
    {
      ({ data }) => {
        console.log('render'); return (
        <Mutation mutation={ADD_TODO_MUTATION}>
          {
            addTodo => (
              <div>
                <button onClick={() => { console.log('addTodo'); addTodo({ variables: { title: 'My new todo' } }) }}>
                  Click me to add a todo!
                </button>

                {
                  (data.todos || []).map(({ title }, index) => (
                    <div key={index} className="todo-item">
                      {title}
                    </div>
                  ))
                }
              </div>
            )
          }
        </Mutation>
      )}
    }
  </Query>
);

Реализация теста.Это монтирует компонент с помощью Enzyme, имитирует щелчок на кнопке, чтобы выполнить мутацию, и ждет, пока компонент не будет визуализирован снова. 

it('renders without crashing', async () => {
  const mocks = [
    {
      request: {
        query: TODOS_QUERY,
      },
      result: {
        data: {
          todos: [
            {
              title: 'An old todo',
            },
          ],
        },
      },
    },
    {
      request: {
        query: ADD_TODO_MUTATION,
        variables: {
          title: 'My new todo',
        },
      },
      result: {
        data: {
          addTodo: null,
        },
      },
    },
  ];

  const wrapper = mount(
    <MockedProvider mocks={mocks} addTypename={false}>
      <Component />
    </MockedProvider>
  );

  await wait(100);
  wrapper.update();

  console.log(wrapper.debug())

  expect(wrapper.contains('An old todo')).toBe(true);
  expect(wrapper.contains('My new todo')).toBe(false);
  wrapper.find('button').simulate('click');

  await wait(100);
  wrapper.update();

  console.log(wrapper.debug())

  expect(wrapper.contains('An old todo')).toBe(true);
  expect(wrapper.contains('My new todo')).toBe(true);
});

Большое спасибо за вашу помощь!

...