From f70a6b955d492056bb592e9baa0b8a1f0bb4af8e Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 31 Jan 2024 16:16:16 +0100 Subject: [PATCH 1/4] Fix vitest patch --- .../@vitest-expect-npm-1.1.3-2062bf533f.patch | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch b/code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch index ea5e834a06df..9a1b74e203bd 100644 --- a/code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch +++ b/code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch @@ -1,10 +1,10 @@ diff --git a/dist/index.js b/dist/index.js -index 974d6b26f626024fc9904908100c9ecaa54f43e1..5be2d35267e7f0525c6588758dbebe72599f88a9 100644 +index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e016d2b06 100644 --- a/dist/index.js +++ b/dist/index.js -@@ -6,31 +6,37 @@ import { processError } from '@vitest/utils/error'; +@@ -6,28 +6,35 @@ import { processError } from '@vitest/utils/error'; import { util } from 'chai'; - + const MATCHERS_OBJECT = Symbol.for("matchers-object"); -const JEST_MATCHERS_OBJECT = Symbol.for("$$jest-matchers-object"); +// Patched this symbol for storybook, so that @storybook/test can be used in a jest environment as well. @@ -12,17 +12,14 @@ index 974d6b26f626024fc9904908100c9ecaa54f43e1..5be2d35267e7f0525c6588758dbebe72 +const JEST_MATCHERS_OBJECT = Symbol.for("$$jest-matchers-object-storybook"); const GLOBAL_EXPECT = Symbol.for("expect-global"); const ASYMMETRIC_MATCHERS_OBJECT = Symbol.for("asymmetric-matchers-object"); - + if (!Object.prototype.hasOwnProperty.call(globalThis, MATCHERS_OBJECT)) { const globalState = /* @__PURE__ */ new WeakMap(); - const matchers = /* @__PURE__ */ Object.create(null); - const assymetricMatchers = /* @__PURE__ */ Object.create(null); +- const assymetricMatchers = /* @__PURE__ */ Object.create(null); Object.defineProperty(globalThis, MATCHERS_OBJECT, { get: () => globalState }); -+ Object.defineProperty(globalThis, ASYMMETRIC_MATCHERS_OBJECT, { -+ get: () => assymetricMatchers -+ }); +} +if (!Object.prototype.hasOwnProperty.call(globalThis, JEST_MATCHERS_OBJECT)) { + const matchers = /* @__PURE__ */ Object.create(null); @@ -34,15 +31,14 @@ index 974d6b26f626024fc9904908100c9ecaa54f43e1..5be2d35267e7f0525c6588758dbebe72 matchers }) }); -- Object.defineProperty(globalThis, ASYMMETRIC_MATCHERS_OBJECT, { -- get: () => assymetricMatchers -- }); ++} ++if (!Object.prototype.hasOwnProperty.call(globalThis, ASYMMETRIC_MATCHERS_OBJECT)) { ++ const assymetricMatchers = /* @__PURE__ */ Object.create(null); + Object.defineProperty(globalThis, ASYMMETRIC_MATCHERS_OBJECT, { + get: () => assymetricMatchers + }); } + function getState(expect) { return globalThis[MATCHERS_OBJECT].get(expect); } -+ - function setState(state, expect) { - const map = globalThis[MATCHERS_OBJECT]; - const current = map.get(expect) || {}; From 8f52eac95be2a4104e5d291c9c87a6f26d198741 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 31 Jan 2024 16:18:18 +0100 Subject: [PATCH 2/4] Fix yarn.lock --- code/yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 7ba452bc433f..e0901c716f38 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -8479,12 +8479,12 @@ __metadata: "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch": version: 1.1.3 - resolution: "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch::version=1.1.3&hash=5d51c9" + resolution: "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch::version=1.1.3&hash=8fb073" dependencies: "@vitest/spy": "npm:1.1.3" "@vitest/utils": "npm:1.1.3" chai: "npm:^4.3.10" - checksum: 426287f864f58b05b1c4689bc87b4ef2ca7b3316a22e8e42d94ee9c125cbc0caf294618c9a1201a8ddf8ab68ce1ab194d1e34589f7d608906a3dc679074cfe22 + checksum: c3bbcae82050b7e92438c85e679ef2cb09162dc5638a10b3f0b5a8fc5600dfb0be578a244d84012ae2f1715748189393ac0fc72b891efff3503338221795ebe5 languageName: node linkType: hard From 08800fe63d3af33efd0b1fb9a704b8d879f24481 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 31 Jan 2024 16:36:33 +0100 Subject: [PATCH 3/4] Upgrade testing-library/jest-dom --- code/lib/test/package.json | 2 +- code/lib/test/src/expect.ts | 3 ++- code/yarn.lock | 51 +++++++++++++++++++++++++++++++++++-- 3 files changed, 52 insertions(+), 4 deletions(-) diff --git a/code/lib/test/package.json b/code/lib/test/package.json index f49a54ad4b89..ef71e012cd78 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -48,7 +48,7 @@ "@storybook/instrumenter": "workspace:*", "@storybook/preview-api": "workspace:*", "@testing-library/dom": "^9.3.1", - "@testing-library/jest-dom": "^6.1.3", + "@testing-library/jest-dom": "^6.4.0", "@testing-library/user-event": "14.3.0", "@vitest/expect": "1.1.3", "@vitest/spy": "^1.1.3", diff --git a/code/lib/test/src/expect.ts b/code/lib/test/src/expect.ts index 7e8b9d95cf03..da17eb52ff59 100644 --- a/code/lib/test/src/expect.ts +++ b/code/lib/test/src/expect.ts @@ -16,9 +16,10 @@ import { } from '@vitest/expect'; import * as matchers from '@testing-library/jest-dom/matchers'; import type { PromisifyObject } from './utils'; +import type { TestingLibraryMatchers } from '@testing-library/jest-dom/types/matchers'; type Matchers = PromisifyObject> & - matchers.TestingLibraryMatchers, Promise>; + TestingLibraryMatchers, Promise>; // We only expose the jest compatible API for now export interface Assertion extends Matchers { diff --git a/code/yarn.lock b/code/yarn.lock index e0901c716f38..02847b06a441 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -31,6 +31,13 @@ __metadata: languageName: node linkType: hard +"@adobe/css-tools@npm:^4.3.2": + version: 4.3.3 + resolution: "@adobe/css-tools@npm:4.3.3" + checksum: e76e712df713964b87cdf2aca1f0477f19bebd845484d5fcba726d3ec7782366e2f26ec8cb2dcfaf47081a5c891987d8a9f5c3f30d11e1eb3c1848adc27fcb24 + languageName: node + linkType: hard + "@ampproject/remapping@npm:2.2.1, @ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.2.1": version: 2.2.1 resolution: "@ampproject/remapping@npm:2.2.1" @@ -6663,7 +6670,7 @@ __metadata: "@storybook/instrumenter": "workspace:*" "@storybook/preview-api": "workspace:*" "@testing-library/dom": "npm:^9.3.1" - "@testing-library/jest-dom": "npm:^6.1.3" + "@testing-library/jest-dom": "npm:^6.4.0" "@testing-library/user-event": "npm:14.3.0" "@vitest/expect": "npm:1.1.3" "@vitest/spy": "npm:^1.1.3" @@ -6925,7 +6932,7 @@ __metadata: languageName: node linkType: hard -"@testing-library/jest-dom@npm:^6.1.3, @testing-library/jest-dom@npm:^6.1.4": +"@testing-library/jest-dom@npm:^6.1.4": version: 6.1.5 resolution: "@testing-library/jest-dom@npm:6.1.5" dependencies: @@ -6955,6 +6962,39 @@ __metadata: languageName: node linkType: hard +"@testing-library/jest-dom@npm:^6.4.0": + version: 6.4.0 + resolution: "@testing-library/jest-dom@npm:6.4.0" + dependencies: + "@adobe/css-tools": "npm:^4.3.2" + "@babel/runtime": "npm:^7.9.2" + aria-query: "npm:^5.0.0" + chalk: "npm:^3.0.0" + css.escape: "npm:^1.5.1" + dom-accessibility-api: "npm:^0.6.3" + lodash: "npm:^4.17.15" + redent: "npm:^3.0.0" + peerDependencies: + "@jest/globals": ">= 28" + "@types/bun": "*" + "@types/jest": ">= 28" + jest: ">= 28" + vitest: ">= 0.32" + peerDependenciesMeta: + "@jest/globals": + optional: true + "@types/bun": + optional: true + "@types/jest": + optional: true + jest: + optional: true + vitest: + optional: true + checksum: 6b7eba9ca388986a721fb12f84adf0f5534bf7ec5851982023a889c4a0afac6e9e91291bdac39e1f59a05adefd7727e30463d98b21c3da32fbfec229ccb11ef1 + languageName: node + linkType: hard + "@testing-library/react@npm:^11.2.2": version: 11.2.7 resolution: "@testing-library/react@npm:11.2.7" @@ -12993,6 +13033,13 @@ __metadata: languageName: node linkType: hard +"dom-accessibility-api@npm:^0.6.3": + version: 0.6.3 + resolution: "dom-accessibility-api@npm:0.6.3" + checksum: 10bee5aa514b2a9a37c87cd81268db607a2e933a050074abc2f6fa3da9080ebed206a320cbc123567f2c3087d22292853bdfdceaffdd4334ffe2af9510b29360 + languageName: node + linkType: hard + "dom-converter@npm:^0.2.0": version: 0.2.0 resolution: "dom-converter@npm:0.2.0" From 0f3d22c79bcd28e6946a07ae500a543efa12333d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 31 Jan 2024 16:46:01 +0100 Subject: [PATCH 4/4] Add a test for using storybook/test in vitest --- code/lib/test/src/index.test.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 code/lib/test/src/index.test.ts diff --git a/code/lib/test/src/index.test.ts b/code/lib/test/src/index.test.ts new file mode 100644 index 000000000000..bed58592c1d6 --- /dev/null +++ b/code/lib/test/src/index.test.ts @@ -0,0 +1,8 @@ +import { it } from 'vitest'; +import { expect, fn } from '@storybook/test'; + +it('storybook expect and fn can be used in vitest test', () => { + const spy = fn(); + spy(1); + expect(spy).toHaveBeenCalledWith(1); +});