SWR 测试变异

huangapple go评论64阅读模式
英文:

SWR Test Mutation

问题

以下是您要翻译的内容:

What is a recommended way of testing mutation from SWR?

  const { data, mutate } = useSWR("/api/user", fetch);

  if (data.loggedIn) {
    return (
      <Button
        onClick={() => {
          logout();
          mutate(); // after logging in/out, we mutate the SWR
        }}
      >
        Logout
      </Button>
    );
  } else {
    // login
    return (<h1>Please login</h1>)
  }
}```

Related to discussion: https://github.com/vercel/swr/discussions/2434

If we have given flow `logout -> mutate swr -> show login form`

I think we shouldn't test implementation details and instead test what user actually see after mutation/change happened?

```expect(mutate).toHaveBeenCalled('/logout'); // bad 
expect(screen.getByText('Please login')).toBeInTheDocument(); // correct```

What is the general feeling about this?

<details>
<summary>英文:</summary>

What is a recommended way of testing mutation from SWR? 

function Index() {
const { data, mutate } = useSWR("/api/user", fetch);

if (data.loggedIn) {
return (
<Button
onClick={() => {
logout();
mutate(); // after logging in/out, we mutate the SWR
}}
>
Logout
</Button>
);
} else {
// login
return (<h1>Please login</h1>)
}
}


Related to discussion: https://github.com/vercel/swr/discussions/2434

If we have given flow `logout -&gt; mutate swr -&gt; show login form`


I think we shouldn&#39;t test implementation details and instead test what user actually see after mutation/change happened?

expect(mutate).toHaveBeenCalled('/logout'); // bad
expect(screen.getByText('Please login')).toBeInTheDocument(); // correct


What is the general feeling about this?


</details>


# 答案1
**得分**: 0

这应该可以工作,但是你可能要考虑模拟`fetch`而不是`mock fetch`。

```javascript
import { useSWRConfig } from 'swr';

// FIXME: tests should be mocking the fetch instead
// https://dev.to/bmvantunes/please-don-t-mock-swr-fetch-or-axios-in-your-unit-integration-tests-521k
jest.mock('swr', () => ({
  ...jest.requireActual('swr'),
  useSWRConfig: jest.fn(() => ({
    mutate: () => {},
  })),
}));

it('should mutate data', async () => {
  const mockMutate = jest.fn();

  useSWRConfig.mockImplementationOnce(() => ({ mutate: mockMutate }));

  expect(mockMutate).toHaveBeenCalledWith('swrKey');
  ...
});
英文:

This should work, however you want to consider to mock the fetch instead.

import { useSWRConfig } from &#39;swr&#39;;

// FIXME: tests should be mocking the fetch instead
// https://dev.to/bmvantunes/please-don-t-mock-swr-fetch-or-axios-in-your-unit-integration-tests-521k
jest.mock(&#39;swr&#39;, () =&gt; ({
  ...jest.requireActual(&#39;swr&#39;),
  useSWRConfig: jest.fn(() =&gt; ({
    mutate: () =&gt; {},
  })),
}));

it(&#39;should mutate data&#39;, async () =&gt; {
  const mockMutate = jest.fn();

  useSWRConfig.mockImplementationOnce(() =&gt; ({ mutate: mockMutate }));

  expect(mockMutate).toHaveBeenCalledWith(&#39;swrKey&#39;);
  ...
});

huangapple
  • 本文由 发表于 2023年2月23日 23:43:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/75547113.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定