vitest
vitest copied to clipboard
Environment options are not parsed from comments
Describe the bug
Vitest supports parsing @{vitest,jest}-environment comments to set an environment, but it should also support @{vitest,jest}-environment-options comments for compatibility with Jest.
Reproduction
index.test.js
/**
* @jest-environment jsdom
* @jest-environment-options {"url": "https://example.com/"}
*/
test("use jsdom and set the URL in this test file", () => {
expect(location.href).toBe("https://example.com/")
})
vite.config.js
export default {
test: {
globals: true,
},
}
Expected result from Jest
PASS ./index.test.js
✓ use jsdom and set the URL in this test file (2 ms)
Actual result from Vitest
FAIL index.test.js > use jsdom and set the URL in this test file
AssertionError: expected 'http://localhost:3000/' to be 'https://example.com/' // Object.is equality
❯ index.test.js:6:25
4| */
5| test("use jsdom and set the URL in this test file", () => {
6| expect(location.href).toBe("https://example.com/")
| ^
7| })
8|
- Expected "https://example.com/"
+ Received "http://localhost:3000/"
System Info
System:
OS: macOS 12.5.1
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 43.91 MB / 8.00 GB
Shell: 3.5.1 - /usr/local/bin/fish
Binaries:
Node: 18.8.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.19.1 - /usr/local/bin/npm
Watchman: 2022.08.29.00 - /usr/local/bin/watchman
npmPackages:
vitest: ^0.18.0 => 0.18.1
Used Package Manager
npm
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.
I just noticed that the JSDOM options are scoped under a jsdom property in setup, so there would have to be a change or adapter for that API to fix this.
I just noticed that the JSDOM options are scoped under a
jsdomproperty insetup, so there would have to be a change or adapter for that API to fix this.
We can just put options inside a key of current env:
/**
* @jest-environment jsdom
* @jest-environment-options {"url": "https://example.com/"}
*/
// environmentOptions -> { jsdom: { url: string } }
/**
* @jest-environment-options {"url": "https://example.com/"}
*/
// node is default environment. if config is used, will put into the one specified with config
// environmentOptions -> { node: { url: string } }
All spec files have environment, so should not be a problem.
I'm mostly thinking about Jest compatibility, and it doesn't use a jsdom property. Can you pass top level options to an environment?
I'm mostly thinking about Jest compatibility, and it doesn't use a
jsdomproperty.
environment will never be jest compatible, so I don't see any reason to think about jest compatibility here.
The environment API may not be compatible, but we already document compatibility with the @jest-environment comment, so I would prefer to to find a way where we can also be compatible with using @jest-environment-options with JSDOM without an intermediate property.
The environment API may not be compatible, but we already document compatibility with the
@jest-environmentcomment, so I would prefer to to find a way where we can also be compatible with using@jest-environment-optionswith JSDOM without an intermediate property.
You wouldn't need to write @jest-environment-options { jsdom: { option } }, you would write @jest-environment-options { option }, since we already know the environment for the file.
Oh sorry, I think I misunderstood the purpose of the key. Is it just there so options other than those in the comments can be passed to the environment? Also can I still use that with a custom environment without having a 2D object?
Oh sorry, I think I misunderstood the purpose of the key. Is it just there so options other than those in the comments can be passed to the environment?
Yes, you can have multiple environments, so you need a key for each.
Also can I still use that with a custom environment without having a 2D object?
You would use it like this:
// config
export default {
test: {
environmentOptions: {
custom: {} // your options
}
}
}
// or inside a spec file
/**
* @vitest-environment custom
* @vitest-environment-options { url: "http://example.com" }
*/