Comments (9)
I would be fine with a single site for all of the non codesandbox examples.
from react-query.
from react-query.
Another approach here would be to set up these examples as codesandboxes (but using the next server-side template) That way, you could easily demo/tweak them individually.
Honestly, I think I like that more. Any reason not to do that?
from react-query.
Going total codesandbox seems like it'd be better for users who are just evaluating the library and checking out the features. That would solve the dependency installation issues and provide a tweakable demo all at once. An argument the other way would be that keeping examples in the repo serves as documentation, of sorts. The README is already pretty robust, though..
from react-query.
from react-query.
I would love it if the docs showed an example test!
I can't for the life of me figure out how to test this. I am mocking fetch and I can see that fetch is called, and can validate the URL but the component never renders. A test example that shows how to test with this library and suspense would be awesome. I used CRA so in setupTests.js I also mock the scheduler but I'm not sure about it: jest.mock("scheduler", () => require("scheduler/unstable_mock"));
Here's my test
import React, { Suspense } from 'react';
import { render, waitForElement, cleanup } from '@testing-library/react';
// component to test
import InstagramBackground from '.';
import data from './__mocks__/data.json';
// automatically unmount and cleanup DOM after each test is finished.
afterEach(cleanup);
describe('InstagramBackground', () => {
// cleanup mocks
beforeEach(() => {
fetch.resetMocks();
});
it('it renders with suspense', async () => {
fetch.mockResponseOnce(data);
// const { getByTestId } = render(
// <Suspense fallback={<div>Not Rendered Yet</div>}>
// <InstagramBackground username="ferrytalecreative" />
// </Suspense>
// );
// const element = await waitForElement(() => getByTestId('container'));
// expect(element.toMatchSnapshot());
const { asFragment } = await waitForElement(() =>
render(
<Suspense fallback={<div>Not Rendered Yet</div>}>
<InstagramBackground username="ferrytalecreative" />
</Suspense>
)
);
// assert the snapshot matches
expect(asFragment()).toMatchSnapshot();
//assert on the times called and arguments given to fetch
expect(fetch.mock.calls.length).toEqual(1);
expect(fetch.mock.calls[0][0]).toEqual(
'/.netlify/functions/photos?username=ferrytalecreative'
);
});
});
Update: I think I need to try this:
const {container} = render(<div>test</div>, {root: 'concurrent'}) //<-!!
expect(container).toHaveTextContent('test')
from react-query.
Yes, if you are trying to test concurrent mode, you'll need to configure for that. I would suggest starting with a simpler test.
As for the original purpose of this PR, is there anything new here? I would still love for the examples to be easier to access via codesandbox
from react-query.
@tannerlinsley Codesandbox examples in each of the example directories seems like a good middle-ground. You'd likely want to create those under your own codesandbox account, though, right?
I'll create a PR to resolve the dependency installation errors on the exisiting examples.
from react-query.
from react-query.
Related Issues (20)
- Order matters to useInfiniteQuery options and TS HOT 4
- [vue-query] `useQueries` type inference issues with `select`, `computed` and `Array.map` HOT 1
- enabled: false should not ever fire a query or populate the local store HOT 1
- Solid Query: <Suspense> gets stuck in a loading state HOT 9
- Docs: Broken link on "Installation" page HOT 1
- eslint-plugin-query is incompatible with Eslint 9.x
- Solid Query is mixing up queries during SSR HOT 2
- Docs : Remove ‘$’ from Installation Commands in Documentation
- SSR using NextJS App Router with InitialData Does not Callback HOT 4
- Changing `retryDelay` is ignored for query HOT 2
- Solid Query is failing to recognize signal change in `onMount` HOT 7
- Wrong inferring in useInfiniteQuery HOT 3
- Solid: Cannot access 'refetch' before initialization
- docs: search doesn't work HOT 1
- Docs website doesn't work in Brave HOT 2
- Docs website is down HOT 3
- Docs: Error on migration guides HOT 1
- queryFn with server action name not working on Next.js
- isLoading does not exist on useMutation @tanstack/vue-query
- Docs: Invalid links in quick-start.md
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-query.