]> git.ipfire.org Git - thirdparty/vuejs/pinia.git/commitdiff
docs: add testing
authorEduardo San Martin Morote <posva13@gmail.com>
Fri, 25 Jun 2021 10:28:52 +0000 (12:28 +0200)
committerEduardo San Martin Morote <posva13@gmail.com>
Fri, 25 Jun 2021 10:28:52 +0000 (12:28 +0200)
docs/cookbook/testing.md

index d5c3b3c208ecf89105c10a44d53f79f808691ddd..1e96565b937a2af4c14ab9b04aa505e0d6790fec 100644 (file)
@@ -1,9 +1,71 @@
 # Testing stores
 
-This section is still a wip
+Stores will, by design, be used at many places and can make testing much harder than it should be. Fortunately, this doesn't have to be the case. We need to take care of three things when testing stores:
 
-## Store tests
+- The `pinia` instance: Stores cannot work without it
+- `actions`: most of the time, they contain the most complex logic of our stores. Wouldn't it be nice if they were mocked by default?
+- Plugins: If you rely on plugins, you will have to install them for tests too
 
-## Component tests
+Depending on what or how you are testing, we need to take care of these three differently:
 
-### Mocking the store
+- [Unit testing stores (outside of components)](#unit-testing-a-store)
+- [Unit testing components that use stores](#unit-testing-components)
+- [End to End tests](#e2e-tests)
+
+## Unit testing a store
+
+To unit test a store, the most important part is creating a `pinia` instance:
+
+```js
+// counterStore.spec.ts
+import { setActivePinia, createPinia } from 'pinia'
+import { useCounter } from '../src/stores/counter'
+
+describe('Counter Store', () => {
+  beforeEach(() => {
+    // creates a fresh pinia and make it active so it's automatically picked
+    // up by any useStore() call without having to pass it to it:
+    // `useStore(pinia)`
+    setActivePinia(createPinia())
+  })
+
+  it('increments', () => {
+    const counter = useCounter()
+    expect(counter.n).toBe(0)
+    counter.increment()
+    expect(counter.n).toBe(1)
+  })
+
+  it('increments by amount', () => {
+    const counter = useCounter()
+    counter.increment(10)
+    expect(counter.n).toBe(10)
+  })
+})
+```
+
+If you have any store plugins, there is one important thing to know: **plugins won't be used until `pinia` is installed in an App**. This can be solved by creating an empty App or a fake one:
+
+```js
+import { setActivePinia, createPinia } from 'pinia'
+import { createApp } from 'vue'
+import { somePlugin } from '../src/stores/plugin'
+
+// same code as above...
+
+// you don't need to create one app per test
+const app = createApp({})
+beforeEach(() => {
+  const pinia = createPinia().use(somePlugin)
+  app.use(pinia)
+  setActivePinia(pinia)
+})
+```
+
+## Unit testing components
+
+Coming soon with `createTestingPinia()`...
+
+## E2E tests
+
+When it comes to pinia, you don't need to change anything for e2e tests, that's the whole point of e2e tests! You could maybe tests HTTP requests, but that's way beyond the scope of this guide ðŸ˜„.