使用@xstate/test“缺少事件配置”

Question

我正在使用使用@xstate/test和@testing-library/react的基于模型的测试来测试状态机。

基本上，我在测试这台机器：

const itemDamagedMachine = createMachine({
  initial: 'newModal',
  context: {
    productScan: '',
    binScan: '',
  },
  states: {
    newModal: {
      initial: 'scanDamagedItem',
      states: {
        scanDamagedItem: {},
        scanDamagedBin: {},
        declareItemDamaged: {},
      },
    },
    closed: {},
  },
  on: {
    UPDATE_PRODUCT_SCAN: {
      actions: assign({
        productScan: 123456,
      }),
    },
    VALIDATE: {
      target: 'newModal.scanDamagedBin',
    },
    UNREADABLE: {
      target: 'newModal.scanDamagedBin',
    },
    CANCEL: {
      target: 'closed',
    },
    UPDATE_DAMAGED_BIN_SCAN: {
      actions: assign({
        binScan: 'PB_DAMAGED',
      }),
    },
  },
});

然后，我将配置模型，并使用const testPlans = itemDamagedModel.getSimplePathPlans();对其进行测试。

似乎每件事都顺利进行，大约有200次通过测试，但我有一些问题：

• 对于我的每一个测试和每一个事件，我都会得到一个警告Missing config for event "VALIDATE"。我不明白这是什么意思。
• 我所有的测试都是经过验证的，即使我故意在我的模型事件中输入。有时测试的数量会减少，但是当模型找不到特定的输入或按钮时，我会希望看到一些警告。
• 测试都是通过的，即使我将一个空的div作为我的xstate/test呈现组件传递。

Answer 1

我不明白这个想法，但我测试了一个组件如下：

首先，我有我的机器：

import { createMachine, sendParent } from 'xstate';

export const machineDefinition = {
  id: 'checkbox',
  initial: 'unchecked',
  states: {
    unchecked: {
      on: {
        TOGGLE: [
          {
            actions: [ 'sendParent' ],
            target: 'checked',
          },
        ],
      },
    },
    checked: {
      on: {
        TOGGLE: [
          {
            actions: [ 'sendParent' ],
            target: 'unchecked',
          },
        ],
      },
    },
  },
};

const machineOptions = {
  actions: {
    sendParent: sendParent((context, event) => event.data),
  },
};

export default createMachine(machineDefinition, machineOptions);

其次，对render方法testing-library进行了扩展。

import React from 'react'
import HelmetProvider from 'react-navi-helmet-async'
import SpinnerProvider from '@atoms/GlobalSpinner'
import AlertProvider from '@molecules/GlobalAlert'
import InternationalizationProvider from '@internationalization/InternationalizationProvider'
import { render as originalRender } from '@testing-library/react'

const render = (ui, { locale = 'es', ...renderOptions } = {}) => {
  
  const Wrapper = ({ children }) => {
    return (
      <InternationalizationProvider>
          <AlertProvider>
            <SpinnerProvider>
              <HelmetProvider>
                {children}
              </HelmetProvider>
            </SpinnerProvider>
          </AlertProvider>
      </InternationalizationProvider>
    )
  }

  return originalRender(ui, { wrapper: Wrapper, ...renderOptions })
}

export * from '@testing-library/react'

export { render }

最后，我创建了测试

import React from 'react';
import { produce } from 'immer';
import { machineDefinition } from '@stateMachines/atoms/checkbox';
import { createMachine } from 'xstate';
import { createModel } from '@xstate/test';
import { render, cleanup, fireEvent } from '@root/jest.utils';
import Checkbox from '@atoms/Checkbox';

const getMachineDefinitionWithTests = () => produce(machineDefinition, (draft) => {
  draft.states.unchecked.meta = {
    test: ({ getByTestId }) => {
      expect(getByTestId('checkbox-child-3')).toHaveClass('w-8 h-4 rounded-md duration-500 bg-dark-300 dark:bg-accent-100');
    },
  };
  draft.states.checked.meta = {
    test: ({ getByTestId }) => {
      expect(getByTestId('checkbox-child-3')).toHaveClass('w-8 h-4 rounded-md duration-500 bg-dark-300 dark:bg-accent-100');
      expect(getByTestId('checkbox-child-3.1')).toHaveClass('bg-light-100 w-4 h-4 rounded-full duration-500 dark:transform dark:translate-x-full');
    },
  };
});

const getEvents = () => ({
  TOGGLE: {
    exec: ({ getByTestId }) => {
      fireEvent.click(getByTestId('checkbox-container'));
    },
    cases: [ {} ],
  },
});

describe('checkbox', () => {
  const machine = createMachine(getMachineDefinitionWithTests(), {
    actions: {
      sendParent: () => {},
    },
  });
  const machineModel = createModel(machine)
    .withEvents(getEvents());
  const testPlans = machineModel.getSimplePathPlans();

  testPlans.forEach((plan) => {
    describe(plan.description, () => {
      afterEach(cleanup);

      plan.paths.forEach((path) => {
        it(path.description, () => {
          const rendered = render(
            <Checkbox
              test
              label='main.txt1'
              data={{}}
              machine={machine}
            />,
            { locale: 'en' },
          );

          return path.test(rendered);
        });
      });
    });
  });

  describe('coverage', () => {
    it('should have full coverage', () => {
      machineModel.testCoverage();
    });
  });
});

我已经创建了一个包含反应样板的XState，您可以在那里找到前面的测试