1

这就是我的组件的样子。在组件内部,我正在进行突变,一旦突变查询完成,就会调用 handleOnComplete 函数。这段代码工作正常。

function BrandingSearch() {
  const [searchList, setSearchList] = useState([]);

  const [searchQuery, { loading, error }] = useMutation(SEARCH_NO_INDEX, {
    onCompleted: handleOnComplete,
    variables: {
      rootType: 'branding',
      input: {}
    }
  });

  useEffect(() => {
    searchQuery();
  }, [])

  function handleOnComplete(res) {
    if (res && res.searchNoIndex && res.searchNoIndex.payload) {
      const payload = res.searchNoIndex.payload;
      const dataList = payload.map((item) => ({ ...item, id: item.name })); //Get requests require name instead of id
      setSearchList(dataList)
    }
  }


  const component = (
    <CardSearch
      searchList={searchList}
    />
  )

  return component;
}

export default BrandingSearch;

下面是我的测试用例,在测试用例中调用了useEffect,但没有调用handleOnComplete。我怎样才能解决这个问题。

测试用例:

describe('Test BrandingSearch', () => {
  it('', async () => {
    let deleteMutationCalled = false;
    const mocks = [
      {
        request: {
          query: SEARCH_NO_INDEX,
          variables: {
            rootType: 'branding',
            input: {}
          }
        },
        result: () => {
          deleteMutationCalled = true;
          return { data:{} };
        }
      }
    ];
    let wrapper;
    act(() => {
      wrapper = create(
        <MockedProvider mocks={mocks} addTypename={false}>
          <BrandingSearch />
        </MockedProvider>
      )
    })
    let component = wrapper.root;
    expect(deleteMutationCalled).toBe(true);
    //Expecting this to be set true, once the mutation is fired.
  })
});

任何帮助表示赞赏。

4

0 回答 0