Question

我正在尝试测试运行突变后应使用新数据更新的组件。我在下面发布了示例代码。您可以找到它on GitHub as runnable repository as well。

不幸的是，我没有找到一种方法来突变后实际更新import android.widget.TextView; import android.os.Bundle; import android.app.Activity; public class Test extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); final TextView tv = new TextView(this); tv.setText("Hello World!"); setContentView(tv); } }的商店数据。当您运行测试时，您可以看到正在执行该突变，并且此后该组件被渲染。但是，由于突变没有做任何事情，因此不会添加新的待办事项。

有人可以告诉我使用MockedProvider时如何通过突变来更改数据吗？

测试查询和变异：

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>
);

非常感谢您的帮助！

Answer 1

MockedProvider接受cache道具，您可以将其传递给自己的缓存（初始化ApolloClient时使用的缓存）。这样可以使您在测试中自动进行缓存更新。

您可能需要删除addTypeName=false才能使其正常工作，并提供包括__typename在内的模拟内容。

https://www.apollographql.com/docs/react/api/react-testing/

使用MockedProvider测试时，使用Apollo突变更新商店

1 个答案: