From bd183665e8bd35b5d1487d526620dc095ee6a176 Mon Sep 17 00:00:00 2001 From: Ross MacPhee <10212476+rossyman@users.noreply.github.com> Date: Thu, 9 Sep 2021 17:12:30 +0100 Subject: [PATCH] [bug: #19, #22] Fix examples and v27 Jest support / ESM --- README.md | 13 +++++------ package.json | 2 +- preset.ts | 42 ++++++++++++++++++++++++++---------- templates/index-dom.spec.js | 32 +++++++++++++++++++++++++++ templates/index-dom.spec.ts | 32 +++++++++++++++++++++++++++ templates/index.spec.js | 26 ++++++++++++++++------ templates/index.spec.ts | 26 ++++++++++++++++------ templates/jest.config.json | 1 + templates/tsconfig.spec.json | 6 +----- 9 files changed, 143 insertions(+), 37 deletions(-) create mode 100644 templates/index-dom.spec.js create mode 100644 templates/index-dom.spec.ts diff --git a/README.md b/README.md index f6b5bbd..9c0a955 100644 --- a/README.md +++ b/README.md @@ -28,12 +28,13 @@ After the preset runs, ### ⚙️ Options -| Description | Flag | Negated | Default | -| ------------------ | --------------- | ------------------ | ------- | -| Interactive Mode | `--interaction` | `--no-interaction` | True | -| Jest DOM Support | `--jest-dom` | `--no-jest-dom` | True | -| Typescript Support | `--ts` | `--no-ts` | False | -| Generate Example | `--examples` | `--no-examples` | True | +| Description | Flag | Negated | Default | +| ------------------------- | --------------- | ------------------ | ------- | +| Interactive Mode | `--interaction` | `--no-interaction` | True | +| Jest DOM Support | `--jest-dom` | `--no-jest-dom` | True | +| Typescript Support | `--ts` | `--no-ts` | False | +| JSDOM Jest Env by Default | `--jsdom` | `--jsdom` | True | +| Generate Example | `--examples` | `--no-examples` | True | ### 📑 Relevant Documentation diff --git a/package.json b/package.json index b28073c..0d59257 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@rossyman/svelte-add-jest", - "version": "1.2.0", + "version": "1.3.0", "description": "SvelteKit adder for Jest unit testing", "license": "MIT", "keywords": [ diff --git a/preset.ts b/preset.ts index 135131e..1e88537 100644 --- a/preset.ts +++ b/preset.ts @@ -4,7 +4,7 @@ type Dependencies = { [key: string]: { version: string; type?: 'DEV' | 'PEER'; - reliesOn?: string; + reliesOn?: string | string[]; } } @@ -126,7 +126,9 @@ abstract class Adder { } action.if(() => dependencyConfig.reliesOn - ? this.getConfiguration(dependencyConfig.reliesOn) + ? Array.isArray(dependencyConfig.reliesOn) + ? dependencyConfig.reliesOn.every(Boolean) + : this.getConfiguration(dependencyConfig.reliesOn) : true ); }); @@ -158,7 +160,8 @@ class SvelteJestAdder extends Adder { protected readonly CONFIGURATION: Configuration = { 'jest-dom': {message: 'Enable Jest DOM support?', default: true, question: true}, 'ts': {message: 'Enable TypeScript support?', default: false, question: true}, - 'examples': {message: 'Generate example test file?', default: true, question: true} + 'examples': {message: 'Generate example test file?', default: true, question: true}, + 'jsdom': {message: 'Enable JSDOM environment by default?', default: true, question: true} }; protected readonly REQUIRED_DEPENDENCIES: Dependencies = { @@ -171,7 +174,7 @@ class SvelteJestAdder extends Adder { '@testing-library/jest-dom': {version: '^5.14.0', type: 'DEV', reliesOn: 'jest-dom'}, 'ts-jest': {version: '^27.0.0', type: 'DEV', reliesOn: 'ts'}, '@types/jest': {version: '^27.0.0', type: 'DEV', reliesOn: 'ts'}, - '@types/testing-library__jest-dom': {version: '^5.14.0', type: 'DEV', reliesOn: 'ts'} + '@types/testing-library__jest-dom': {version: '^5.14.0', type: 'DEV', reliesOn: ['ts', 'jest-dom']} }; run(): void { @@ -197,33 +200,50 @@ class SvelteJestAdder extends Adder { Preset .editJson('jest.config.json').merge({ transform: { - '^.+\\.svelte$': ['svelte-jester', {preprocess: true}], + '^.+\\.svelte$': ['./node_modules/svelte-jester/dist/transformer.mjs', {preprocess: true}], '^.+\\.ts$': 'ts-jest' }, - moduleFileExtensions: ['js', 'ts', 'svelte'], + moduleFileExtensions: ['ts'], + extensionsToTreatAsEsm: ['.ts'], globals: { 'ts-jest': { - tsconfig: 'tsconfig.spec.json' + tsconfig: 'tsconfig.spec.json', + 'useESM': true } } }) .withTitle('Modifying Jest config for TypeScript transformation') .if(() => this.getConfiguration('ts')); + Preset + .editJson('jest.config.json').merge({ + testEnvironment: 'jsdom' + }) + .withTitle('Modifying Jest config to enable JSDOM environment') + .if(() => this.getConfiguration('jsdom')); + this.safeExtract('Initializing TypeScript config for tests', 'tsconfig.spec.json') .if(() => this.getConfiguration('ts')); + this.safeExtract('Initializing example test file', 'index.spec.ts') + .to('src/routes/') + .if(() => this.getConfiguration('examples') && this.getConfiguration('ts') && !this.getConfiguration('jest-dom')); + this.safeExtract('Initializing example test file', 'index.spec.js') .to('src/routes/') - .if(() => this.getConfiguration('examples') && this.getConfiguration('jest-dom') && !this.getConfiguration('ts')); + .if(() => this.getConfiguration('examples') && !this.getConfiguration('ts') && !this.getConfiguration('jest-dom')); - this.safeExtract('Initializing example test file', 'index.spec.ts') + this.safeExtract('Initializing example test file', 'index-dom.spec.ts') + .to('src/routes/') + .if(() => this.getConfiguration('examples') && this.getConfiguration('ts') && this.getConfiguration('jest-dom')); + + this.safeExtract('Initializing example test file', 'index-dom.spec.js') .to('src/routes/') - .if(() => this.getConfiguration('examples') && this.getConfiguration('jest-dom') && this.getConfiguration('ts')); + .if(() => this.getConfiguration('examples') && !this.getConfiguration('ts') && this.getConfiguration('jest-dom')); Preset .editJson('package.json') - .merge({scripts: {'test': 'jest src --config jest.config.json', 'test:watch': 'npm run test -- --watch'}}) + .merge({scripts: {'test': 'NODE_OPTIONS=--experimental-vm-modules jest src --config jest.config.json', 'test:watch': 'npm run test -- --watch'}}) .withTitle('Adding test scripts to package.json'); Preset diff --git a/templates/index-dom.spec.js b/templates/index-dom.spec.js new file mode 100644 index 0000000..433f150 --- /dev/null +++ b/templates/index-dom.spec.js @@ -0,0 +1,32 @@ +import { render } from '@testing-library/svelte'; +import Index from './index.svelte'; + +/** + * @jest-environment jsdom + */ + +/** + * An example test suite outlining the usage of + * `describe()`, `beforeEach()`, `test()` and `expect()` + * + * @see https://jestjs.io/docs/getting-started + * @see https://github.com/testing-library/jest-dom + */ + +describe('Index', () => { + + let renderedComponent; + + beforeEach(() => { + renderedComponent = render(Index); + }); + + describe('once the component has been rendered', () => { + + test('should show the proper heading', () => { + expect(renderedComponent.getByText('Welcome to SvelteKit')).toBeInTheDocument(); + }); + + }); + +}); diff --git a/templates/index-dom.spec.ts b/templates/index-dom.spec.ts new file mode 100644 index 0000000..c7883b1 --- /dev/null +++ b/templates/index-dom.spec.ts @@ -0,0 +1,32 @@ +import { render, RenderResult } from '@testing-library/svelte'; +import Index from './index.svelte'; + +/** + * @jest-environment jsdom + */ + +/** + * An example test suite outlining the usage of + * `describe()`, `beforeEach()`, `test()` and `expect()` + * + * @see https://jestjs.io/docs/getting-started + * @see https://github.com/testing-library/jest-dom + */ + +describe('Index', () => { + + let renderedComponent: RenderResult; + + beforeEach(() => { + renderedComponent = render(Index); + }); + + describe('once the component has been rendered', () => { + + test('should show the proper heading', () => { + expect(renderedComponent.getByText('Welcome to SvelteKit')).toBeInTheDocument(); + }); + + }); + +}); diff --git a/templates/index.spec.js b/templates/index.spec.js index e96769d..5c601bb 100644 --- a/templates/index.spec.js +++ b/templates/index.spec.js @@ -1,12 +1,24 @@ /** - * @jest-environment jsdom + * An example test suite outlining the usage of + * `describe()`, `beforeEach()`, `test()` and `expect()` + * + * @see https://jestjs.io/docs/getting-started */ -import '@testing-library/jest-dom/extend-expect'; -import { render } from '@testing-library/svelte'; -import index from './index.svelte'; +describe('Index', () => { + + let isTestSuitePassing = false; + + beforeEach(() => { + isTestSuitePassing = true; + }); + + describe('isTestSuitePassing', () => { + + test('should be true', () => { + expect(isTestSuitePassing).toBe(true); + }); + + }); -test('shows proper heading when rendered', () => { - const { getByText } = render(index); - expect(getByText('Hello world!')).toBeInTheDocument(); }); diff --git a/templates/index.spec.ts b/templates/index.spec.ts index e96769d..5c601bb 100644 --- a/templates/index.spec.ts +++ b/templates/index.spec.ts @@ -1,12 +1,24 @@ /** - * @jest-environment jsdom + * An example test suite outlining the usage of + * `describe()`, `beforeEach()`, `test()` and `expect()` + * + * @see https://jestjs.io/docs/getting-started */ -import '@testing-library/jest-dom/extend-expect'; -import { render } from '@testing-library/svelte'; -import index from './index.svelte'; +describe('Index', () => { + + let isTestSuitePassing = false; + + beforeEach(() => { + isTestSuitePassing = true; + }); + + describe('isTestSuitePassing', () => { + + test('should be true', () => { + expect(isTestSuitePassing).toBe(true); + }); + + }); -test('shows proper heading when rendered', () => { - const { getByText } = render(index); - expect(getByText('Hello world!')).toBeInTheDocument(); }); diff --git a/templates/jest.config.json b/templates/jest.config.json index aae856e..941a4f9 100644 --- a/templates/jest.config.json +++ b/templates/jest.config.json @@ -7,5 +7,6 @@ "^\\$lib(.*)$": "/src/lib$1", "^\\$app(.*)$": ["/.svelte-kit/dev/runtime/app$1", "/.svelte-kit/build/runtime/app$1"] }, + "extensionsToTreatAsEsm": [".svelte"], "moduleFileExtensions": ["js", "svelte"] } diff --git a/templates/tsconfig.spec.json b/templates/tsconfig.spec.json index 8deca04..0a962e9 100644 --- a/templates/tsconfig.spec.json +++ b/templates/tsconfig.spec.json @@ -1,11 +1,7 @@ { "extends": "./tsconfig.json", "compilerOptions": { - "isolatedModules": false, - "lib": [ - "es2020", - "DOM" - ] + "isolatedModules": false }, "exclude": [ "src/**"