🦴🦷👅👄🧠🫀

dev-project-react/src/components/VModel/Basic2.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="vue-component">
     <h3>This is the Vue Component.</h3>
-    <span>received zooValue's value: {{$attrs.zoo}}</span><br/>
-    <span>received modelValue's value: <span data-testid="vModelShow2">{{$attrs.modelValue}}</span></span><br/>
+    <span>received zooValue's value: <span :data-testid="`zooValueShow2_${$attrs.testId}`">{{$attrs.zoo}}</span></span><br/>
+    <span>received modelValue's value: <span :data-testid="`modelValueShow2_${$attrs.testId}`">{{$attrs.modelValue}}</span></span><br/>
     <slot/>
     <button @click="changeModel" :data-testid="`changeModel2_${$attrs.testId}`">change model</button>
   </div>

dev-project-react/src/components/VModel/index.js

@@ -11,9 +11,9 @@ export default function () {
     const [foo, setFoo] = useState(Math.random())
     const [bar, setBar] = useState(Math.random())
     const [zoo, setZoo] = useState(Math.random())
-    const [type0, setType0] = useState(typeof zoo)
-    const [type1, setType1] = useState(typeof zoo)
-    const [type2, setType2] = useState(typeof zoo)
+    const [type0, setType0] = useState('')
+    const [type1, setType1] = useState('')
+    const [type2, setType2] = useState('')
 
     return <div>
         <h3>Pass v-model to Vue Components.</h3>
@@ -25,11 +25,11 @@ export default function () {
                 bar's value: {bar}
             </div>
         </Basic>
-        typeof received v-model zoo: <span data-testid="type0">{type0}</span>
+        typeof received v-model zoo: <span data-testid="modelType0">{type0}</span>
         <Basic2 v-model={[zoo, (val) => {setType0(typeof val); setZoo(val)}, 'zoo']} testId="0"/>
-        typeof received v-model zoo: <span data-testid="type1">{type1}</span>
+        typeof received v-model zoo: <span data-testid="modelType1">{type1}</span>
         <Basic2 v-model={[zoo, (val) => {setType1(typeof val); setZoo(val)}, 'zoo', ['number']]}  testId="1"/>
-        typeof received v-model value: <span data-testid="type2">{type2}</span>
+        typeof received v-model value: <span data-testid="modelType2">{type2}</span>
         <Basic2 v-model={[zoo, (val) => {setType2(typeof val); setZoo(val)}, ['number']]} testId="2"/>
         <Basic1 v-models={{
             modelValue: [zoo, setZoo],

jest.config.js

@@ -172,7 +172,7 @@ module.exports = {
   // The glob patterns Jest uses to detect test files
   testMatch: [
     '<rootDir>/tests/**/*-test.[jt]s?(x)',
-    // '<rootDir>/tests/cases/useInjectPropsFromWrapperInReact/1-test.js'
+    // '<rootDir>/tests/cases/vModelInReact/1-test.js'
   ],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped

package.json

@@ -20,7 +20,8 @@
     "setup:yarn": "yarn && npm run dev-setup:yarn && npm run test-setup:yarn",
     "setup:npm": "npm i && npm run dev-setup:npm && npm run test-setup:npm",
     "test": "jest",
-    "test:remote": "cross-env TEST_REMOTE=true jest",
+    "test:remote": "cross-env TEST_REMOTE=true jest --coverage false",
+    "test:temp": "jest --coverage false",
     "remote-beta:yarn": "yarn add veaury@beta --cwd dev-project-vue3 && yarn add veaury@beta --cwd dev-project-react && yarn add veaury@beta --cwd tests",
     "remote-latest:yarn": "yarn add veaury --cwd dev-project-vue3 && yarn add veaury --cwd dev-project-react && yarn add veaury --cwd tests",
     "remote-beta:npm": "npm i veaury@beta --prefix dev-project-vue3 && npm i veaury@beta --prefix dev-project-react && npm i veaury@beta --prefix tests",

tests/cases/applyReactInVue/1-test.js

@@ -19,4 +19,8 @@ test('test lazyReactInVue', async () => {
   expect(linkElement).toBeInTheDocument();
   linkElement = await screen.findByText(/test lazyPureReactInVue/);
   expect(linkElement).toBeInTheDocument();
+  linkElement = await screen.findByText(/lazyReactInVue loader options/);
+  expect(linkElement).toBeInTheDocument();
+  linkElement = await screen.findByText(/lazyPureReactInVue loader options/);
+  expect(linkElement).toBeInTheDocument();
 })

tests/cases/applyReactInVue/LazyReactInVue.vue

@@ -6,6 +6,12 @@
     <PureReactComponent>
       test lazyPureReactInVue
     </PureReactComponent>
+    <ReactComponent1>
+      lazyReactInVue loader options
+    </ReactComponent1>
+    <PureReactComponent1>
+      lazyPureReactInVue loader options
+    </PureReactComponent1>
   </div>
 
 </template>
@@ -14,4 +20,10 @@
 import {lazyReactInVue, lazyPureReactInVue} from 'veaury'
 const ReactComponent = lazyReactInVue(() => import('./ReactComponent'))
 const PureReactComponent = lazyPureReactInVue(() => import('./ReactComponent'))
+const ReactComponent1 = lazyReactInVue({
+  loader: () => import('./ReactComponent')
+})
+const PureReactComponent1 = lazyPureReactInVue({
+  loader: () => import('./ReactComponent')
+})
 </script>

tests/cases/applyVueInReact/2-getVNode-test.js

@@ -1,13 +1,26 @@
 import '@testing-library/jest-dom';
-import { render, screen, act } from '@testing-library/react';
-import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import React, { Fragment } from 'react';
 import VueComponent from './2-getVNode'
 import {applyPureVueInReact, getVNode} from 'veaury'
 
 const ReactComponent = applyPureVueInReact(VueComponent)
-const ReactNode = <div>test getVNode</div>
-test('test getVNode', () => {
-  render(<ReactComponent passingVNode={getVNode(ReactNode)}/>);
-  const linkElement = screen.getByText(/test getVNode/);
-  expect(linkElement).toBeInTheDocument();
+function TempReactComponent() {
+  return <div>TempReactComponent</div>
+}
+const ReactNode = <Fragment><div>test getVNode<TempReactComponent/></div></Fragment>
+test('test getVNode', async () => {
+  let ref1
+  let ref2 = {current: null}
+  render(<ReactComponent passingVNode={getVNode(() => ReactNode)}>
+    <div data-testid="children1" ref={(r) => {ref1 = r}}>children1</div>
+    <div data-testid="children2" ref={ref2}>children2</div>
+  </ReactComponent>);
+  await waitFor(() => {
+    expect(screen.getByText(/test getVNode/)).toBeInTheDocument();
+    expect(screen.getByText(/TempReactComponent/)).toBeInTheDocument();
+    expect(!!ref1).toBe(true)
+    expect(!!ref2.current).toBe(true)
+  })
+
 });

tests/cases/applyVueInReact/2-getVNode.vue

@@ -1,5 +1,6 @@
 <template>
   <component :is="() => passingVNode"/>
+  <slot/>
 </template>
 
 <script setup>

tests/cases/vModelInReact/1-test.js

@@ -14,13 +14,22 @@ test('test crossingProvider', async () => {
   })
 
   await waitFor(async () => {
-    expect(await findByTestId('vModelShow')).toHaveTextContent(getByTestId('reactModelShow').innerHTML)
-    expect(await findByTestId('vModelShow1')).toHaveTextContent(getByTestId('reactModelShow1').innerHTML)
+    expect(await findByTestId('vModelShow')).toHaveTextContent(getByTestId('reactModelShow').textContent)
+    expect(await findByTestId('vModelShow1')).toHaveTextContent(getByTestId('reactModelShow1').textContent)
+    expect(await findByTestId('zooValueShow2_0')).toHaveTextContent(getByTestId('reactModelShow1').textContent)
+    expect(await findByTestId('zooValueShow2_1')).toHaveTextContent(getByTestId('reactModelShow1').textContent)
+    expect(await findByTestId('modelValueShow2_2')).toHaveTextContent(getByTestId('reactModelShow1').textContent)
   })
 
   await act(async () => {
-    fireEvent.click(await findByTestId('changeModel'))
-    fireEvent.click(await findByTestId('changeModel1'))
+    fireEvent.click(await findByTestId('changeModel2_0'))
+    fireEvent.click(await findByTestId('changeModel2_1'))
+    fireEvent.click(await findByTestId('changeModel2_2'))
   })
 
+  await waitFor(async () => {
+    expect(await findByTestId('modelType0')).toHaveTextContent('string')
+    expect(await findByTestId('modelType1')).toHaveTextContent('number')
+    expect(await findByTestId('modelType2')).toHaveTextContent('number')
+  })
 })