Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error testing with Vitest #506

Open
somecho opened this issue May 23, 2023 · 10 comments
Open

Error testing with Vitest #506

somecho opened this issue May 23, 2023 · 10 comments

Comments

@somecho
Copy link

somecho commented May 23, 2023

I get the following error when I test a component with codemirror:

Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens 
because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

Here is a minimal project reproducing this error: https://github.com/somecho/react-codemirror-vitest

Someone else is also facing this issue.

@jaywcjlove
Copy link
Member

@somecho
Copy link
Author

somecho commented May 23, 2023

Is this a problem with Vite then?

@jaywcjlove
Copy link
Member

@somecho I have no problem writing test cases with jest. I think vitest may need to be configured or modified.

@Nepomuceno
Copy link

Tried the project with react-codemirror version 4.21.3 and the error still there.

@Irev-Dev
Copy link

I've got this issue too.

@boy-bizzmine
Copy link

boy-bizzmine commented Jul 19, 2023

We are experiencing the same issue (Vitest+react-codemirror) from the moment we introduced the following code (relevant parts):

import { Compartment, EditorState } from '@codemirror/state';
import { insertTab, indentLess } from '@codemirror/commands';
import { keymap } from '@codemirror/view';

const tabSize = new Compartment();

let extensions = [
    [tabSize.of(EditorState.tabSize.of(4))],
    [keymap.of([{ key: 'Tab', run: insertTab }])],
    [keymap.of([{ key: 'Tab', run: insertTab, shift: indentLess }])],
];

editType && extensions.push(xml());
<CodeMirror
    ...
    extensions={extensions}
    ...
/>

This error only appears in tests and not in dev/production

@Irev-Dev
Copy link

We're likely going to use jest.
We had already being using jest from having started with CRA, but migrating to vite we were going to try and use vitest as well, but haven't been able to.

@AlanGreene
Copy link

@somecho fyi I managed to resolve the error in your reproduction repo with the following changes:

-import { clojure } from '@nextjournal/lang-clojure'
+import { langs } from '@uiw/codemirror-extensions-langs';
function App() {
  return (
    <>
      <div>Bug Reproduction</div>
      <CodeMirror
        value={'(+ 1 1)'}
-       extensions={[clojure()]}
+       extensions={[langs.clojure()]}

It's still using @nextjournal/lang-clojure under the hood, see

import { clojure } from '@nextjournal/lang-clojure';

@jestfuljoker
Copy link

Any updates about this? I'm facing the same issue :/

@yogiduzit
Copy link

alias: {
  '@codemirror/state': path.resolve(
    __dirname,
    './node_modules/@codemirror/state/dist/index.cjs'
  ),
  '@codemirror/lang-yaml': path.resolve(
    __dirname,
  ),
  '@codemirror/lang-json': path.resolve(
    __dirname,
    './node_modules/@codemirror/lang-json/dist/index.cjs'
  )
}

Basically, you need to force the CJS version of @codemirror/state and all other packages depending on it.

stefanhengl added a commit to sourcegraph/sourcegraph-public-snapshot that referenced this issue Jun 26, 2024
This is part of the Keyword Search GA project (see background below). 

The core change is that we use the default pattern type consistently for
the query input field and preview. Before, we hardcoded `literal` as the
default and used `standard` for previews.

This is does not affect existing code monitors.

Other fixes:
- highlight keyword queries correctly

Background:
- "keyword" will soon be the new default pattern type
- the default pattern type can be overridden in the user/global settings
- query fields in all of our products should respect the default

Test Plan:
- The unit test is currently "skipped" with the following comment
```
// TODO: these tests trigger an error with CodeMirror, complaining about being
// loaded twice, see uiwjs/react-codemirror#506
```
- Manual testing:
- I created several code monitors with and without pattern type and
checked in the DB that the correct pattern type was appended.
- I configured a new default pattern type in my user settings and
verified that the setting changes the default pattern type for code
monitors.

Co-authored-by: Felix Kling <[email protected]>
peterguy pushed a commit to sourcegraph/sourcegraph-public-snapshot that referenced this issue Jun 26, 2024
This is part of the Keyword Search GA project (see background below). 

The core change is that we use the default pattern type consistently for
the query input field and preview. Before, we hardcoded `literal` as the
default and used `standard` for previews.

This is does not affect existing code monitors.

Other fixes:
- highlight keyword queries correctly

Background:
- "keyword" will soon be the new default pattern type
- the default pattern type can be overridden in the user/global settings
- query fields in all of our products should respect the default

Test Plan:
- The unit test is currently "skipped" with the following comment
```
// TODO: these tests trigger an error with CodeMirror, complaining about being
// loaded twice, see uiwjs/react-codemirror#506
```
- Manual testing:
- I created several code monitors with and without pattern type and
checked in the DB that the correct pattern type was appended.
- I configured a new default pattern type in my user settings and
verified that the setting changes the default pattern type for code
monitors.

Co-authored-by: Felix Kling <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants