',
createInitScript(1),
diff --git a/test/compat/stream-node.test.js b/test/compat/stream-node.test.jsx
similarity index 92%
rename from test/compat/stream-node.test.js
rename to test/compat/stream-node.test.jsx
index 159e0e21..b22cb839 100644
--- a/test/compat/stream-node.test.js
+++ b/test/compat/stream-node.test.jsx
@@ -1,6 +1,6 @@
import { PassThrough } from 'node:stream';
import { h } from 'preact';
-import { expect } from 'chai';
+import { expect, describe, it } from 'vitest';
import { Suspense } from 'preact/compat';
import { createSubtree, createInitScript } from '../../src/lib/client';
import { renderToPipeableStream } from '../../src/stream-node';
@@ -66,10 +66,10 @@ describe('renderToPipeableStream', () => {
const result = await sink.promise;
expect(result).to.deep.equal([
- '
loading...
',
+ '
loading...
',
'
',
createInitScript(),
- createSubtree('47', '
it works
'),
+ createSubtree('5', '
it works
'),
'
'
]);
});
diff --git a/test/compat/stream.test.js b/test/compat/stream.test.jsx
similarity index 90%
rename from test/compat/stream.test.js
rename to test/compat/stream.test.jsx
index f2378a67..ae81dbfd 100644
--- a/test/compat/stream.test.js
+++ b/test/compat/stream.test.jsx
@@ -1,6 +1,6 @@
/*global globalThis*/
import { h } from 'preact';
-import { expect } from 'chai';
+import { expect, beforeAll, describe, it } from 'vitest';
import { Suspense } from 'preact/compat';
import { createSubtree, createInitScript } from '../../src/lib/client';
import { renderToReadableStream } from '../../src/stream';
@@ -42,7 +42,7 @@ function createSink(input) {
}
describe('renderToReadableStream', () => {
- before(async () => {
+ beforeAll(async () => {
// attempt to use native web streams in Node 18, otherwise fall back to a polyfill:
let streams;
try {
@@ -81,11 +81,11 @@ describe('renderToReadableStream', () => {
const result = await sink.promise;
- expect(result).to.deep.equal([
- '
loading...
',
+ expect(result).toEqual([
+ '
loading...
',
'
',
createInitScript(),
- createSubtree('56', '
it works
'),
+ createSubtree('5', '
it works
'),
'
'
]);
});
diff --git a/test/context.test.jsx b/test/context.test.jsx
index 47e8e2a9..0e6ba208 100644
--- a/test/context.test.jsx
+++ b/test/context.test.jsx
@@ -1,6 +1,6 @@
import render from '../src/jsx.js';
import { h, createContext, Component } from 'preact';
-import { expect } from 'chai';
+import { expect, describe, it } from 'vitest';
import { dedent } from './utils.jsx';
describe('context', () => {
diff --git a/test/debug/index.test.jsx b/test/debug/index.test.jsx
index bf6aebb8..4558831c 100644
--- a/test/debug/index.test.jsx
+++ b/test/debug/index.test.jsx
@@ -1,7 +1,7 @@
import 'preact/debug';
import render from '../../src/index.js';
import { h } from 'preact';
-import { expect } from 'chai';
+import { expect, describe, it } from 'vitest';
describe('debug', () => {
it('should not throw "Objects are not valid as a child" error', () => {
diff --git a/test/index.test.jsx b/test/index.test.jsx
index 491c3e86..f09363a1 100644
--- a/test/index.test.jsx
+++ b/test/index.test.jsx
@@ -1,6 +1,6 @@
import renderToString from '../src/index.js';
import { default as renderToStringPretty, shallowRender } from '../src/jsx.js';
-import { expect } from 'chai';
+import { expect, describe, it } from 'vitest';
describe('render-to-string', () => {
describe('exports', () => {
diff --git a/test/jsx.test.jsx b/test/jsx.test.jsx
index 72f564bf..9131d00d 100644
--- a/test/jsx.test.jsx
+++ b/test/jsx.test.jsx
@@ -1,6 +1,6 @@
import render from '../src/jsx.js';
import { h } from 'preact';
-import { expect } from 'chai';
+import { expect, describe, it } from 'vitest';
import { dedent } from './utils.jsx';
describe('jsx', () => {
diff --git a/test/pretty.test.jsx b/test/pretty.test.jsx
index 4e588a13..69ee510b 100644
--- a/test/pretty.test.jsx
+++ b/test/pretty.test.jsx
@@ -1,7 +1,7 @@
import basicRender from '../src/index.js';
import { render } from '../src/jsx.js';
import { h, Fragment } from 'preact';
-import { expect } from 'chai';
+import { expect, describe, it } from 'vitest';
import { dedent, svgAttributes, htmlAttributes } from './utils.jsx';
describe('pretty', () => {
diff --git a/test/render.test.jsx b/test/render.test.jsx
index 52586257..7efcb8d2 100644
--- a/test/render.test.jsx
+++ b/test/render.test.jsx
@@ -17,8 +17,7 @@ import {
useMemo,
useId
} from 'preact/hooks';
-import { expect } from 'chai';
-import { spy, stub, match } from 'sinon';
+import { expect, vi, describe, it } from 'vitest';
import { svgAttributes, htmlAttributes } from './utils.jsx';
function shallowRender(vnode) {
@@ -356,23 +355,25 @@ describe('render', () => {
describe('Functional Components', () => {
it('should render functional components', () => {
- let Test = spy(({ foo, children }) =>
{children}
);
+ let Test = vi.fn(({ foo, children }) =>
{children}
);
let rendered = render(
content);
expect(rendered).to.equal(`
content
`);
- expect(Test).to.have.been.calledOnce.and.calledWithExactly(
- match({
+ expect(Test).toHaveBeenCalledOnce();
+
+ expect(Test).toHaveBeenCalledWith(
+ expect.objectContaining({
foo: 'test',
children: 'content'
}),
- match({})
+ expect.objectContaining({})
);
});
it('should render functional components within JSX', () => {
- let Test = spy(({ foo, children }) =>
{children}
);
+ let Test = vi.fn(({ foo, children }) =>
{children}
);
let rendered = render(
@@ -386,26 +387,34 @@ describe('render', () => {
``
);
- expect(Test).to.have.been.calledOnce.and.calledWithExactly(
- match({
+ expect(Test).toHaveBeenCalledOnce();
+ expect(Test).toHaveBeenCalledWith(
+ expect.objectContaining({
foo: 1,
- children: match({ type: 'span', props: { children: 'asdf' } })
+ children: expect.objectContaining({
+ type: 'span',
+ props: { children: 'asdf' }
+ })
}),
- match({})
+ expect.objectContaining({})
);
});
});
describe('Classical Components', () => {
it('should render classical components', () => {
- let Test = spy(
- class Test extends Component {
- render({ foo, children }, state) {
- return {children}
;
- }
+ let constructorSpy = vi.fn();
+ class Test extends Component {
+ constructor(props, context) {
+ super(props, context);
+ constructorSpy(props, context);
}
- );
- spy(Test.prototype, 'render');
+
+ render({ foo, children }, state) {
+ return {children}
;
+ }
+ }
+ vi.spyOn(Test.prototype, 'render');
let rendered = render(content);
@@ -416,30 +425,34 @@ describe('render', () => {
expect(rendered).to.equal(`content
`);
- expect(Test).to.have.been.calledOnce.and.calledWith(
- match(PROPS),
- match({})
+ expect(constructorSpy).toHaveBeenCalledOnce();
+ expect(constructorSpy).toHaveBeenCalledWith(
+ expect.objectContaining(PROPS),
+ expect.objectContaining({})
);
- expect(
- Test.prototype.render
- ).to.have.been.calledOnce.and.calledWithExactly(
- match(PROPS),
- match({}),
- match({}) // empty context
+ expect(Test.prototype.render).toHaveBeenCalledOnce();
+ expect(Test.prototype.render).toHaveBeenCalledWith(
+ expect.objectContaining(PROPS),
+ expect.objectContaining({}),
+ expect.objectContaining({}) // empty context
);
});
it('should render classical components within JSX', () => {
- let Test = spy(
- class Test extends Component {
- render({ foo, children }, state) {
- return {children}
;
- }
+ let constructorSpy = vi.fn();
+ class Test extends Component {
+ constructor(props) {
+ super(props);
+ constructorSpy();
}
- );
- spy(Test.prototype, 'render');
+ render({ foo, children }, state) {
+ return {children}
;
+ }
+ }
+
+ vi.spyOn(Test.prototype, 'render');
let rendered = render(
@@ -453,22 +466,25 @@ describe('render', () => {
``
);
- expect(Test).to.have.been.calledOnce;
+ expect(constructorSpy).toHaveBeenCalledOnce();
- expect(
- Test.prototype.render
- ).to.have.been.calledOnce.and.calledWithExactly(
- match({
+ expect(Test.prototype.render).toHaveBeenCalledOnce();
+
+ expect(Test.prototype.render).toHaveBeenCalledWith(
+ expect.objectContaining({
foo: 1,
- children: match({ type: 'span', props: { children: 'asdf' } })
+ children: expect.objectContaining({
+ type: 'span',
+ props: { children: 'asdf' }
+ })
}),
- match({}),
- match({})
+ expect.objectContaining({}),
+ expect.objectContaining({})
);
});
it('should initialize state as an empty object', () => {
- const fn = spy();
+ const fn = vi.fn();
class Test extends Component {
render(state) {
fn(this.state, state);
@@ -477,7 +493,11 @@ describe('render', () => {
}
render();
- expect(fn).to.be.calledOnce.and.be.calledWith(match({}), match({}));
+ expect(fn).toHaveBeenCalledOnce();
+ expect(fn).toHaveBeenCalledWith(
+ expect.objectContaining({}),
+ expect.objectContaining({})
+ );
});
it('should invoke getDerivedStateFromProps', () => {
@@ -489,16 +509,17 @@ describe('render', () => {
return ;
}
}
- spy(Test.prototype.constructor, 'getDerivedStateFromProps');
- spy(Test.prototype, 'render');
+ vi.spyOn(Test.prototype.constructor, 'getDerivedStateFromProps');
+ vi.spyOn(Test.prototype, 'render');
const result = render();
expect(
Test.prototype.constructor.getDerivedStateFromProps
- ).to.have.been.calledOnce.and.to.have.been.calledBefore(
- Test.prototype.render
- );
+ ).toHaveBeenCalledOnce();
+ expect(
+ Test.prototype.constructor.getDerivedStateFromProps
+ ).toHaveBeenCalledBefore(Test.prototype.render);
expect(result).to.equal('');
});
@@ -510,14 +531,13 @@ describe('render', () => {
return ;
}
}
- spy(Test.prototype, 'componentWillMount');
- spy(Test.prototype, 'render');
+ vi.spyOn(Test.prototype, 'componentWillMount');
+ vi.spyOn(Test.prototype, 'render');
render();
- expect(
- Test.prototype.componentWillMount
- ).to.have.been.calledOnce.and.to.have.been.calledBefore(
+ expect(Test.prototype.componentWillMount).toHaveBeenCalledOnce();
+ expect(Test.prototype.componentWillMount).toHaveBeenCalledBefore(
Test.prototype.render
);
});
@@ -547,18 +567,20 @@ describe('render', () => {
return ;
}
}
- spy(Test.prototype.constructor, 'getDerivedStateFromProps');
- spy(Test.prototype, 'componentWillMount');
- spy(Test.prototype, 'render');
+ vi.spyOn(Test.prototype.constructor, 'getDerivedStateFromProps');
+ vi.spyOn(Test.prototype, 'componentWillMount');
+ vi.spyOn(Test.prototype, 'render');
render();
expect(
Test.prototype.constructor.getDerivedStateFromProps
- ).to.have.been.calledOnce.and.to.have.been.calledBefore(
- Test.prototype.render
- );
- expect(Test.prototype.componentWillMount).to.not.have.been.called;
+ ).toHaveBeenCalledOnce();
+
+ expect(
+ Test.prototype.constructor.getDerivedStateFromProps
+ ).toHaveBeenCalledBefore(Test.prototype.render);
+ expect(Test.prototype.componentWillMount).not.toHaveBeenCalled();
});
it('should pass context to grandchildren', () => {
@@ -577,31 +599,31 @@ describe('render', () => {
);
}
}
- spy(Outer.prototype, 'getChildContext');
+ vi.spyOn(Outer.prototype, 'getChildContext');
class Inner extends Component {
render(props, state, context) {
return {context && context.a}
;
}
}
- spy(Inner.prototype, 'render');
+ vi.spyOn(Inner.prototype, 'render');
render();
- expect(Outer.prototype.getChildContext).to.have.been.calledOnce;
- expect(Inner.prototype.render).to.have.been.calledWith(
- match({}),
- match({}),
+ expect(Outer.prototype.getChildContext).toHaveBeenCalledOnce();
+ expect(Inner.prototype.render).toHaveBeenCalledWith(
+ expect.objectContaining({}),
+ expect.objectContaining({}),
CONTEXT
);
CONTEXT.foo = 'bar';
render();
- expect(Outer.prototype.getChildContext).to.have.been.calledTwice;
- expect(Inner.prototype.render).to.have.been.calledWith(
- match(PROPS),
- match({}),
+ expect(Outer.prototype.getChildContext).toHaveBeenCalledTimes(2);
+ expect(Inner.prototype.render).toHaveBeenCalledWith(
+ expect.objectContaining(PROPS),
+ expect.objectContaining({}),
CONTEXT
);
});
@@ -618,37 +640,37 @@ describe('render', () => {
return ;
}
}
- spy(Outer.prototype, 'getChildContext');
+ vi.spyOn(Outer.prototype, 'getChildContext');
class Inner extends Component {
render(props, state, context) {
return {context && context.a}
;
}
}
- spy(Inner.prototype, 'render');
+ vi.spyOn(Inner.prototype, 'render');
render();
- expect(Outer.prototype.getChildContext).to.have.been.calledOnce;
- expect(Inner.prototype.render).to.have.been.calledWith(
- match({}),
- match({}),
+ expect(Outer.prototype.getChildContext).toHaveBeenCalledOnce();
+ expect(Inner.prototype.render).toHaveBeenCalledWith(
+ expect.objectContaining({}),
+ expect.objectContaining({}),
CONTEXT
);
CONTEXT.foo = 'bar';
render();
- expect(Outer.prototype.getChildContext).to.have.been.calledTwice;
- expect(Inner.prototype.render).to.have.been.calledWith(
- match(PROPS),
- match({}),
+ expect(Outer.prototype.getChildContext).toHaveBeenCalledTimes(2);
+ expect(Inner.prototype.render).toHaveBeenCalledWith(
+ expect.objectContaining(PROPS),
+ expect.objectContaining({}),
CONTEXT
);
// make sure render() could make use of context.a
- expect(Inner.prototype.render).to.have.returned(
- match({ props: { children: 'a' } })
+ expect(Inner.prototype.render).toHaveReturned(
+ expect.objectContaining({ props: { children: 'a' } })
);
});
@@ -683,19 +705,23 @@ describe('render', () => {
}
}
- spy(Inner.prototype, 'render');
- spy(InnerMost.prototype, 'render');
+ vi.spyOn(Inner.prototype, 'render');
+ vi.spyOn(InnerMost.prototype, 'render');
render();
- expect(Inner.prototype.render).to.have.been.calledWith(
- match({}),
- match({}),
+ expect(
+ Inner.prototype.render
+ ).toHaveBeenCalledWith(
+ expect.objectContaining({}),
+ expect.objectContaining({}),
{ outerContext }
);
- expect(InnerMost.prototype.render).to.have.been.calledWith(
- match({}),
- match({}),
+ expect(
+ InnerMost.prototype.render
+ ).toHaveBeenCalledWith(
+ expect.objectContaining({}),
+ expect.objectContaining({}),
{ outerContext, innerContext }
);
});
@@ -752,11 +778,11 @@ describe('render', () => {
function Middle() {
return (
-
+
);
}
- function Inner() {
+ function Inner2() {
return 'hi';
}
@@ -770,8 +796,8 @@ describe('render', () => {
shallow: true,
shallowHighOrder: false
});
- expect(rendered, '{shallow:true,shallowHighOrder:false}').to.equal(
- '
',
+ expect(rendered, '{shallow:true,shallowHighOrder:false}').toEqual(
+ '
',
'but it should never render nested grandchild components'
);
});
@@ -920,7 +946,7 @@ describe('render', () => {
});
it('should prevent re-rendering', () => {
- const Bar = stub().returns();
+ const Bar = vi.fn(() => );
let count = 0;
@@ -935,7 +961,8 @@ describe('render', () => {
expect(render()).to.equal('');
- expect(Bar).to.have.been.calledOnce.and.calledWithMatch({ count: 1 });
+ expect(Bar).toHaveBeenCalledWith({ count: 1 }, expect.anything());
+ expect(Bar).toHaveBeenCalledOnce();
});
});
diff --git a/test/setup.js b/test/setup.js
deleted file mode 100644
index 59139093..00000000
--- a/test/setup.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import chai from 'chai';
-import sinonChai from 'sinon-chai';
-
-chai.use(sinonChai);
diff --git a/test/shallowRender.test.jsx b/test/shallowRender.test.jsx
index ca332445..a05b9de0 100644
--- a/test/shallowRender.test.jsx
+++ b/test/shallowRender.test.jsx
@@ -1,11 +1,10 @@
import { shallowRender } from '../src/jsx.js';
import { h, Fragment } from 'preact';
-import { expect } from 'chai';
-import { spy } from 'sinon';
+import { vi, describe, it, expect } from 'vitest';
describe('shallowRender()', () => {
it('should not render nested components', () => {
- let Test = spy(({ foo, children }) => (
+ let Test = vi.fn(({ foo, children }) => (
test child
{children}
@@ -26,11 +25,11 @@ describe('shallowRender()', () => {
expect(rendered).to.equal(
`
`
);
- expect(Test).not.to.have.been.called;
+ expect(Test).not.toHaveBeenCalled();
});
it('should always render root component', () => {
- let Test = spy(({ foo, children }) => (
+ let Test = vi.fn(({ foo, children }) => (
test child
{children}
@@ -49,7 +48,7 @@ describe('shallowRender()', () => {
expect(rendered).to.equal(
`
test childasdf
`
);
- expect(Test).to.have.been.calledOnce;
+ expect(Test).toHaveBeenCalledTimes(1);
});
describe('should ignore Fragments', () => {
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 00000000..dc89dd6b
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+ esbuild: {
+ jsx: 'transform',
+ jsxFactory: 'h',
+ jsxFragment: 'Fragment',
+ jsxDev: false
+ },
+ test: {}
+});