Set up testing with jest #2

phloose commented 2021年03月25日 12:14:13 +01:00

• Adds jest framework with transformers for:
  • svelte components (svelte-jester)
    * typescript modules (ts-jest)
• Adds @testing-library/svelte which provides utility functions for testing svelte components
• Adds @testing-library/jest-dom for extending jest matchers with handy custom DOM matchers
• Adds pouchdb-adapter-memory which should be used in tests (see Adapters section in RxDB docs)
• Adds a snapshot resolver that will place jest snapshots in the top level folder and also keeps the same structure as the tests folder.

jest normally looks for a __tests__ folder in the root of the repository. Snapshots will be placed inside a __snapshots__ folder. I'd also suggest to keep the same folder structure in the tests folder as in the src folder.

Setup code can be placed in the file jest.setup.ts which will be loaded for each test file (reference).

* Adds [jest](https://jestjs.io/) framework with transformers for: * svelte components ([svelte-jester](https://github.com/mihar-22/svelte-jester)) * typescript modules ([ts-jest](https://github.com/kulshekhar/ts-jest)) * Adds [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro) which provides utility functions for testing svelte components * Adds [@testing-library/jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/) for extending jest matchers with handy custom DOM matchers * Adds [pouchdb-adapter-memory](https://www.npmjs.com/package/pouchdb-adapter-memory) which should be used in tests (see [Adapters section](https://rxdb.info/adapters.html) in RxDB docs) * Adds a snapshot resolver that will place jest [snapshots](https://jestjs.io/docs/snapshot-testing) in the top level folder and also keeps the same structure as the tests folder. jest normally looks for a `__tests__` folder in the root of the repository. Snapshots will be placed inside a `__snapshots__` folder. I'd also suggest to keep the same folder structure in the tests folder as in the src folder. Setup code can be placed in the file `jest.setup.ts` which will be loaded for each test file ([reference](https://jestjs.io/docs/configuration#setupfilesafterenv-array)).

arran commented 2021年03月25日 13:02:27 +01:00

Looks really clean, I appreciate you adding pouchdb-adapter-memory for future too.

I not sure I understand the __tests__ folder structure, will this directory exist beside each components or is there a single directory where all tests will belong?

Looks really clean, I appreciate you adding `pouchdb-adapter-memory` for future too. I not sure I understand the `__tests__` folder structure, will this directory exist beside each components or is there a single directory where all tests will belong?

phloose commented 2021年03月25日 13:11:59 +01:00

__tests__ will be at located at the root of the repository and therefore be separate from the components and ts-modules in the src folder. I personally prefer to have a separate test folder. What do you think?

`__tests__` will be at located at the root of the repository and therefore be separate from the components and ts-modules in the `src` folder. I personally prefer to have a separate test folder. What do you think?

phloose commented 2021年03月25日 13:34:49 +01:00

I would like to set up und use the pouchdb-adapter-memory only when tests are being run like described above. But i am having trouble to set up detecting if we are in a test environment or a production environment.

Normally you would do this via globals/environment variables process.env.NODE_ENV or import.meta.env.MODE (MDN ref). process.env.NODE_ENV is obviously only available in a Node environment in which the tests are being run. Snowpack does set import.meta.env.MODE to either "production" when building or "development" when running the dev server. Jest sets process.env.NODE_ENV to "test".

The problem with that is that jest or ts-jest does not understand import.meta or in other words does not fully support ES6 modules (only in jest@next with this setting and ts-jest@next) and the browser cannot handle process.env.NODE_ENV.

The simplest solution for this akward javascript ecosystem problem would be to only use the pouchdb-adapter-memory ...

I would like to set up und use the `pouchdb-adapter-memory` only when tests are being run like described above. But i am having trouble to set up detecting if we are in a test environment or a production environment. Normally you would do this via globals/environment variables `process.env.NODE_ENV` or `import.meta.env.MODE` ([MDN ref](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta)). `process.env.NODE_ENV` is obviously only available in a Node environment in which the tests are being run. Snowpack does set `import.meta.env.MODE` to either "production" when building or "development" when running the dev server. Jest sets `process.env.NODE_ENV` to "test". The problem with that is that jest or ts-jest does not understand `import.meta` or in other words does not fully support ES6 modules (only in [jest@next](https://jestjs.io/docs/next/ecmascript-modules) with [this setting](https://jestjs.io/docs/next/configuration#extensionstotreatasesm-arraystring) and [ts-jest@next](https://kulshekhar.github.io/ts-jest/docs/next/guides/esm-support/)) and the browser cannot handle `process.env.NODE_ENV`. The simplest solution for this akward javascript ecosystem problem would be to only use the `pouchdb-adapter-memory` ...

arran commented 2021年03月25日 15:55:09 +01:00

__tests__ will be at located at the root of the repository and therefore be separate from the components and ts-modules in the src folder. I personally prefer to have a separate test folder. What do you think?

Sounds good to me, keep the ./src directory structure clutter-free.

... pouchdb-adapter-memory ...

I see, maybe this is something that can be improved in the future - I don't see an issue with including the dep now.

> `__tests__` will be at located at the root of the repository and therefore be separate from the components and ts-modules in the `src` folder. I personally prefer to have a separate test folder. What do you think? Sounds good to me, keep the `./src` directory structure clutter-free. > ... pouchdb-adapter-memory ... I see, maybe this is something that can be improved in the future - I don't see an issue with including the dep now.