Debug error in MobX strict-mode (#14)

* debug error in mobx strict-mode

* v1.0.9

jest.config.js

@@ -1,4 +1,7 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
+  setupFiles: [
+    '<rootDir>/src/testSetup.ts'
+  ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formstate-x",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Extended alternative for formstate",
   "repository": {
     "type": "git",

src/fieldState.spec.ts

@@ -1,12 +1,6 @@
-import { when, spy, observable, runInAction } from 'mobx'
+import { when, observable, runInAction } from 'mobx'
 import FieldState from './fieldState'
 
-// spy((event) => {
-//   if (event.type === 'action') {
-//     console.log(`${event.name} with args: ${event.arguments}`)
-//   }
-// })
-
 const defaultDelay = 10
 const stableDelay = defaultDelay * 3 // [onChange debounce] + [async validate] + [buffer]
 

src/fieldState.ts

@@ -238,9 +238,11 @@ export default class FieldState<TValue> extends Disposable implements Composible
       // see https://github.com/mobxjs/mobx/issues/1956
       debounce(() => {
         if (this.value !== this._value) {
-          this.value = this._value
-          this._validateStatus = ValidateStatus.NotValidated
-          this._activated = true
+          runInAction('sync-value-when-_value-changed', () => {
+            this.value = this._value
+            this._validateStatus = ValidateStatus.NotValidated
+            this._activated = true
+          })
         }
       }, delay),
       { name: 'reaction-when-_value-change' }

src/formState.spec.ts

@@ -1,13 +1,7 @@
-import { when, observable, runInAction, spy, autorun, isObservable } from 'mobx'
+import { observable, runInAction, isObservable } from 'mobx'
 import FieldState from './fieldState'
 import FormState from './formState'
 
-// spy((event) => {
-//   if (event.type === 'action') {
-//     console.log(`${event.name} with args: ${event.arguments}`)
-//   }
-// })
-
 const defaultDelay = 10
 const stableDelay = defaultDelay * 3 // [onChange debounce] + [async validate] + [buffer]
 
@@ -579,15 +573,19 @@ describe('FormState (mode: array) validation', () => {
       value => createFieldState(value)
     )).validators(list => list.join('').length > 5 && 'too long')
 
-    state.$.push(createFieldState('456'))
+    runInAction(() => {
+      state.$.push(createFieldState('456'))
+    })
     // 如果不手动调用 validate()，新增 field 可能一直处于初始状态，即 !dirty，从而导致 !form.validated
     state.validate()
 
     await delay()
     expect(state.hasError).toBe(true)
     expect(state.error).toBe('too long')
 
-    state.$.splice(0, 1)
+    runInAction(() => {
+      state.$.splice(0, 1)
+    })
 
     await delay()
     expect(state.hasError).toBe(false)
@@ -634,11 +632,13 @@ describe('FormState (mode: array) validation', () => {
     expect(state.hasError).toBe(true)
     expect(state.error).toBe('too long')
 
-    state.$.splice(
-      1, 1,
-      createFieldState(''),
-      createFieldState('')
-    )
+    runInAction(() => {
+      state.$.splice(
+        1, 1,
+        createFieldState(''),
+        createFieldState('')
+      )
+    })
 
     await delay()
     expect(state.hasError).toBe(true)
@@ -686,7 +686,9 @@ describe('FormState (mode: array) validation', () => {
     expect(state.error).toBe('too long')
 
     state.$[0].onChange('')
-    state.$.push(createFieldState(''))
+    runInAction(() => {
+      state.$.push(createFieldState(''))
+    })
     state.validate()
 
     await delay()
@@ -746,7 +748,9 @@ describe('FormState (mode: array) validation', () => {
     expect(state.hasError).toBe(true)
     expect(state.error).toBe('too many')
 
-    state.$.pop()
+    runInAction(() => {
+      state.$.pop()
+    })
     state.$[1].onChange('456')
     await delay()
     expect(state.hasError).toBe(true)
@@ -929,10 +933,12 @@ describe('nested FormState', () => {
       return inputState.validators(duplicateValidator)
     }
 
-    state.$.inputs.$.push(
-      createInputState(''),
-      createInputState('')
-    )
+    runInAction(() => {
+      state.$.inputs.$.push(
+        createInputState(''),
+        createInputState('')
+      )
+    })
 
     await state.validate()
     expect(state.error).toBe('empty')
@@ -961,7 +967,9 @@ describe('nested FormState', () => {
     expect(state.$.inputs.$[1].error).toBe('empty')
 
     state.$.inputs.$[1].onChange('4')
-    state.$.inputs.$.push(createFieldState('56'))
+    runInAction(() => {
+      state.$.inputs.$.push(createFieldState('56'))
+    })
 
     await delay()
     expect(state.error).toBe('too long')

src/testSetup.ts

@@ -0,0 +1,32 @@
+/**
+ * @file setup test env
+ * @author nighca <[email protected]>
+ */
+
+
+import { configure, spy } from 'mobx'
+
+configure({ enforceActions: 'observed' })
+
+// use `debug=true npx jest ...` to enable action log
+if (process.env.debug) {
+  const startAt = Date.now()
+
+  spy((event) => {
+    if (event.type === 'action') {
+      const actionAt = formatTime(Date.now() - startAt)
+      const argsInfo = (
+        event.arguments && event.arguments.length > 0
+        ? `args: ${event.arguments.join(', ')}`
+        : 'no args'
+      )
+      console.log(`${actionAt} ${event.name} with ${argsInfo}`)
+    }
+  })
+}
+
+function formatTime(timeInMs: number) {
+  const part1 = ('00' + Math.floor(timeInMs / 1000)).slice(-2)
+  const part2 = (timeInMs % 1000 + '000').slice(0, 3)
+  return part1 + ':' + part2
+}