diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 1e9e9d2..9f5d737 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -3,13 +3,16 @@ on: [push, pull_request] jobs: build: runs-on: ubuntu-latest + strategy: + matrix: + node-version: ['20.x', '22.x'] steps: - name: Checkout repository uses: actions/checkout@v4 - - name: Use Node.js + - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: - node-version: '20.x' + node-version: ${{ matrix.node-version }} cache: 'npm' - name: NPM install run: npm install @@ -17,4 +20,3 @@ jobs: run: npm run build - name: Jest run: npm run test - diff --git a/README.md b/README.md index 5d228ea..75320a7 100644 --- a/README.md +++ b/README.md @@ -168,7 +168,7 @@ require('codemirror/mode/javascript/javascript'); - Is server side rendering supported? -Yes. react-codemirror2 will prevent rendering in absence of `navigator`. You can also force the component to not render via a `PREVENT_CODEMIRROR_RENDER` global. +Yes. react-codemirror2 will prevent rendering in absence of `window`. You can also force the component to not render via a `PREVENT_CODEMIRROR_RENDER` global. - How can I get the instance? diff --git a/package.json b/package.json index 085e1b2..9ddcb87 100644 --- a/package.json +++ b/package.json @@ -20,10 +20,8 @@ "src/**" ], "setupFiles": [ - "@nteract/mockument", - "raf/polyfill" + "./test/setup.js" ], - "testRegex": "./test/(index|index.server).spec.tsx", "transform": { ".(ts|tsx)": "ts-jest" }, diff --git a/src/index.tsx b/src/index.tsx index abfa1b0..a021139 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,7 +4,7 @@ import * as codemirror from 'codemirror'; declare let global: any; declare let require: any; -const SERVER_RENDERED = (typeof navigator === 'undefined' || (typeof global !== 'undefined' && global['PREVENT_CODEMIRROR_RENDER'] === true)); +const SERVER_RENDERED = (typeof window === 'undefined' || (typeof global !== 'undefined' && global['PREVENT_CODEMIRROR_RENDER'] === true)); let cm; if (!SERVER_RENDERED) { diff --git a/test/index.server.spec.tsx b/test/index-prevent-codemirror-render.server.spec.tsx similarity index 100% rename from test/index.server.spec.tsx rename to test/index-prevent-codemirror-render.server.spec.tsx diff --git a/test/index-server.spec.tsx b/test/index-server.spec.tsx new file mode 100644 index 0000000..e3600a9 --- /dev/null +++ b/test/index-server.spec.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +// @ts-ignore +import { renderToString } from 'react-dom/server'; + +import {Controlled, UnControlled} from '../src'; + +describe('Server Rendering', () => { + + it('should not render', () => { + const uWrapper = renderToString(); + const cWrapper = renderToString( {}}/>); + + expect(uWrapper).toBe(""); + expect(cWrapper).toBe(""); + }); +}); diff --git a/test/setup.js b/test/setup.js new file mode 100644 index 0000000..abd6c8f --- /dev/null +++ b/test/setup.js @@ -0,0 +1,4 @@ +if (typeof window !== 'undefined') { + require('@nteract/mockument'); + require('raf/polyfill'); +}