1

テスト起動イベントで使用するために、react select コンポーネントをモックしようとしています。以下は、jest を使用して作成した反応選択です。

jest.mock("react-select", () => ({ options, onChange }) => {
  function handleChange(event) {
    const option = [];
    option.push(options.find(option => option === event.currentTarget.value));
    onChange(option);
    console.log(option);............................................................//line 1
  }
  return (
    <select
      data-testid="test-select"
      name="users"
      label="users"
      options={[
        "a",
        "b",
        "c",
        "d",
        "e"
      ]}
      onChange={handleChange}
    >
      {options.map(value => (
        <option key={value} value={value}>
          {value}
        </option>
      ))}
    </select>
  );
});

問題は、コンソールにundefinedline 1が出力されることです。以下は、私のテスト用の火災イベントのモックアップです。

const chooseInput = getByTestId("test-select");
    fireEvent.change(chooseInput, {
      target: {
        value: "b"
      }
    });

テストは次のように失敗します。

expect(received).toBeInTheDocument()

    received value must be an HTMLElement or an SVGElement.
    Received has value: null

火災イベントの開始時にオプションが更新されないのはなぜですか?

4

1 に答える 1

0

ライブラリからデフォルトのエクスポートをモックするための構造は次のとおりです。

jest.mock("react-select", () => {
  return {
    __esModule: true,
    default: ({ options, onChange }) => {
      // Your mock implementation goes here
    },
  };
})

は__esModule: true重要です

defaultメイン関数は、モック化された実装を表すプロパティを持つオブジェクトを返す必要があります

したがって、完全なコードは

jest.mock("react-select", () => {
  return {
    __esModule: true,
    default: ({
      options,
      onChange
    }) => {
      function handleChange(event) {
        const option = [];
        option.push(options.find(option => option === event.currentTarget.value));
        onChange(option);
        console.log(option);
      }
      return ( <
        select data - testid = "test-select"
        name = "users"
        label = "users"
        options = {
          [
            "a",
            "b",
            "c",
            "d",
            "e"
          ]
        }
        onChange = {
          handleChange
        } > {
          options.map(value => ( <
            option key = {
              value
            }
            value = {
              value
            } > {
              value
            } <
            /option>
          ))
        } <
        /select>
      );
    },
  };
})
于 2020-04-12T10:23:42.830 に答える