唐霜的博客

When you using jest to test react application, you may have doubts about how to test components which are wrapped by react-i18next's translate function, and how could you verify the translation is applied to your application. Now let's talk about this topic.

1. testing a translated component

This is easy, according to react-i18next document here, you have several choices, but the best one I think is to do as want you did in your app.js:

const enzymeWrapper = mount(
 <Provider store={store}>
  <I18nextProvider i18n={i18n}>
   <ContactTable />
  </I18nextProvider>
 </Provider>
);

You even do not need a mock config (like react-redux), just do as what you have done in your app.js.

But here you will facing another problem if you use backend mode in your i18n initialize file.

2. verify translated text

You want to know whether i18next has translated your text in testing, so you do what I have told you in previous code. But if you use backend mode in your initialize file, you will find that your texts are not translated, the key in t function will be return.

The reason is when you use backend mode, jest will not request translations files from server side (there is no server side in jest testing), so the resolution is to convert backend mode to sync mode. Create a new initialize file for testing:

import i18n from "i18next";
import enCommonTranslations from "./locales/en/common.json";
import zhCommonTranslations from "./locales/en/common.json";
i18n
    .init({
        lng: "en",
        ns: ["common"],
        defaultNS: "common",
        resources: {
            en: {
                common: enCommonTranslations
            },
            zh: {
                common: zhCommonTranslations
            }
        },
        debug: false,
        interpolation: {
            escapeValue: false
        },
        react: {
            wait: false,
            nsMode: "fallback"
        }
    });
export default i18n;

Use this new file as initialize file in your testing, and you will be excited. All languages are perloaded before unit test, and now you can get translated text from your component.

In a case, I want to sync scrollbar action between different element by jquery. For example, when scroll $a's scrollbar, or mouse wheel scroll down on $a, I want to scroll $b's scrollbar, or even scrollTop/scrollLeft when $b is overflow:hidden. Now let's do it:

let syncScrollTopA2B = ($a, $b) => {
  $a.on('scroll', function() {
    $b.scrollTop($a.scrollTop())
  })
}
let syncMousewheelTopA2B = ($a, $b) => {
  $a.on('mousewheel DOMMouseScroll', function(e) {
    let { deltaY } = e.originalEvent
    $a.scrollTop($a.scrollTop() + deltaY)
    $b.scrollTop($a.scrollTop())
  })
}
let syncTop = ($a, $b) => {
  syncScrollTopA2B($a, $b)
  syncMousewheelTopA2B($b, $a)
}
let syncScrollLeftA2B = ($a, $b) => {
  $a.on('scroll', function() {
    $b.scrollLeft($a.scrollLeft())
  })
}
let syncMousewheelLeftA2B = ($a, $b) => {
  $a.on('mousewheel DOMMouseScroll', function(e) {
    if (e.shiftKey) { // press shift key on your keyboard
      let { deltaX } = e.originalEvent
      $a.scrollLeft($a.scrollLeft() + deltaX)
      $b.scrollLeft($a.scrollLeft())
    }
  })
}
let syncLeft = ($a, $b) => {
  syncScrollLeftA2B($a, $b)
  syncMousewheelLeftA2B($b, $a)
}

When pull scrollbar on $a, scrollTop will sync to $b. The same with mouse wheel event. However, horizontal mouse wheel event is different, you should press shift on your keyboard at the same time.

After using React for months, I have to say it is very different between 'data' and 'state'. However at the first glance, they are the same thing. Now let's talk about this topic.

DATA is a stable structured source type. 'stable' means it will now change unless you request a new data to cover the variable. 'structured' means it is not compatible in different system.

STATE is a fluxible/changeable temporary source type. 'changeable' means it can be changed by current code scope. 'temporary' means when current scope is destroyed it should be destroyed too.

However, we always make a reference from a state to a data. This make the relationship complex.

I think there are several rules for developers to keep in mind:

1. you should not use state to change its refer data, a data which is referred by a state should only be used for response (render, calculation..), no change
2. data should be managed in a redux store like manager tool, if you want to request new data, you should dispatch a action to the store and let the store notify the application, and the application subscribe a listener in which can get the new data
3. change a state means change the view, visual view is based on state, one state, one view, never make it unexpected when using state.

This is what I thought about data and state.