ライブラリのテストと反応コンテキスト

多くの場合、我々は1つのテストセットアップを必要としません.
多くの場合、レンダリングに影響を与えるコンテキストや、ユーザーによって実行されるアクションと相互作用するコンテキストが含まれます.
次の例を設定します.
我々は、ユーザーコンテキストを持つアプリケーションがあります.“私たちはログインユーザーを持っている”に基づいて、我々は異なるレンダリング出力を表示する必要があります.
ログインしているユーザーがプロファイルとログアウトボタンを見ている間は、一度だけログインボタンを見ます.

ステージの設定

我々は何かをテストする必要があるので、すぐに超基本的なコンテキストを設定してみましょう.

Note: This will be a little bit of a non-completed context. If you'd like to learn more about it: Read this article on React context

ファイルを作ることから始めましょうUserContext.js .

import { createContext, useMemo } from 'react';

const UserContext = createContext(null);
export default UserContext;

export const UserContextProvider = ({ children, user }) => {
  const userContext = useMemo(() => ({
    user: user ?? null,
  }));

  return (
    <UserContext.Provider value={userContext}>{children}</UserContext.Provider>
  );
};

私はここであまり多くの詳細に入らないでください、しかし、基本的に、我々は新しい空の文脈を作成して、ユーザーオブジェクトのために値を保持するためにプロバイダーをつくります.
このコンテキストをメインアプリケーションエントリポイントで使用できます.私は、私の中でこれを加えましたindex.js ファイル.

import { UserContextProvider } from './UserContext';

ReactDOM.render(
  <UserContextProvider user='Chris'>
    <App />
  </UserContextProvider>,
  document.getElementById('root')
);

これは純粋にデモ目的のためです、そして、あなたは通常これを取り戻しますuser いくつかの外部パーティからの値が、我々のテストユースケースのために、これはデモに最適です.
さあ、修正しましょうApp このコンテキストの値に基づいて動作するコンポーネント.

import React, { useContext } from 'react';
import UserContext from './UserContext';

function App() {
  const { user } = useContext(UserContext);
  return user ? `Hello there ${user}` : 'Please login';
}

export default App;

これは非常に些細なことかもしれませんが、私たちの文脈がどのようにテストされるかをショーケースにするのに十分でしょう.
まず第一に、我々のアプリケーションを実行しましょう.見るべきだHello there Chris として我々はハードChris .

コンテキストのテスト

さあ、楽しい部分に飛ばしましょう.
この文脈を使用する複数の方法がありますが、私は最も基本的な説明に焦点を当てるので、それを自分で試してみるのは簡単です.
を作成しましょうApp.test.js ファイル.
また、直接'レンダリング'関数を使用してprevious test cases . この場合、レンダリングをコンテキストでラップします.
これを行う最も簡単な方法は、新しいrenderApp 関数.

const renderComponent = ({ username }) => {
  return render(
    <UserContextProvider user={username}>
      <App />
    </UserContextProvider>
  );
};

この例では、コンテキストをオプションusername パラメータ
その中で、我々は単にApp コンポーネント.
それから、我々が我々がユーザーを提供しないならば、それがログインテキストを示すかどうか見るために、我々の最初のテストを書くことができます.

it('should show the login option', async () => {
  renderComponent('');
  expect(screen.queryByText('Please login')).toBeInTheDocument();
});

上記のテストを実行してみてください.
それは成功する🎉
次のテストは、ユーザーを提供し、テキストが変更されているかどうかをテストします.

it(`should show the username`, async () => {
  renderComponent({ username: 'Chris' });
  expect(screen.queryByText('Hello there Chris')).toBeInTheDocument();
});

上記のテストの実行も成功します.
そして、それは、反応文脈をテストする最初の導入です.
これは、あなたのコンテキストがテストしたい複数のセッターを持っているので、超高レベルの抽象化だけです.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or